前言

在笔者的上一篇文章才刚刚演说了vue-cli的webpack模板工程创设优化方案和步子,以及在最后时对前景前端构建的思想和展望。结果那么些时候
Parcel
就横空出世了,近期有关Parcel的文书档案很少,而且Parcel本人也高居急迅迭代发展的试验阶段,但它确实是前者营造的末梢搞定方案,或许这1回,真的没有之一了

原来寄希望于webpack能够一统天下,但伴随着webpack尤其复杂臃肿,笔者对此它的前行实际没有太多的信念,并非作用越强大越完整便是最说得有理,每每望着vue-cli的webpack官方模板都带有了七多少个布局文件,各种文件内种种繁多的逻辑配置,甚至逾越了事情代码的复杂度,那么维护布置本身,就注定是一件工程量巨大的办事,难道说现在还索要再出此外一门语言来单独保管配置吗?

前者零布署的急需尤其高,parcel为前端创设带来了革命性的变化,很庆幸对于Parcel的意识,因为它将自己在此以前端繁杂的布署中解放出来,而自个儿也可望本文能够为和本身有同一苦于和猜疑的读者们,获得答案

思路

对此Parcel的施行,本文基于Vue以及其衍生出来的机件框架iView
二个最简单易行,通用,可进行的Vue前端工程应该由以下部分构成,当中,index.html是单页文件,src/是Vue组件源码,package.json是重视包管理

  1. index.html
  2. src/
  3. package.json

不错,没错,大概不恐怕再简化了,也不可能再追加了,以上正是1个前端Vue通用工程的总体,考虑到实际工程还索要部分匹配和开始展览,大家还索要以下有个别机能,个中,.babelrc兑现编码转换包容浏览器,postcss.config.js贯彻CSS编码转换包容浏览器

  1. .babelrc
  2. postcss.config.js

自个儿确实很担心本身继续再写出还有其它不可或缺的局地,然则幸运的是,没有了,真的没有了,以上正是3个最最最精简且可开始展览的Vue组件化前端工程的组成都部队分

实践

历史观而言,为了让以上两个组成都部队分的同心协力,我们须要使用webpack进行多量,不,海量的复杂配置,让其能够健康办事,那约等于vue-cli的webpack开发模板中build文件夹config文件夹,以及其package.json中一长串的重视包的原由

而是未来,什么都不必要了,因为parcel曾经形成了具备的劳作,
全部在index.html中的注重都会被电动解析和拍卖,因为那本应该正是【程序】的含义,释放人类重复的逻辑工作

我们唯一需求做的便是在packge.json中引入parcel,然而遗憾的是,parcel还尚无标准达成对vue的支撑工作,然则万幸已经有第1方的更换插件推出,而且parcel的插件机制极为优雅,我们只要求进一步引入parcel-plugin-vue

一 、引入创设信赖

解释一下以下信赖:
1.1 超高人气的axios是前者AJAX互连网请求的不二之选
1.2 vuevue-router是Vue项目工程的画龙点睛
1.3 而本文以iview组件框架为里上课,所以引入iview
1.4 parcel-bundlerparcel-plugin-vue是营造基本
1.5 less用于协助CSS编码转换
1.6
babel-preset-envbabel-plugin-transform-object-rest-spread用以ES6编码转换包容

的确不可能再少了,假若能,请联系作者,不胜多谢:)

  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html --public-url /"
  },
  "dependencies": {
    "vue-router": "^3.0.1",
    "axios": "^0.17.1"
  },
  "devDependencies": {
    "babel-preset-env": "^1.6.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "less": "^2.7.3",
    "parcel-bundler": "^1.4.1",
    "parcel-plugin-vue": "^1.5.0",
    "vue": "^2.5.13",
    "iview": "^2.8.0"
  }

2、在index.html中引入js依赖

此地须要专注的是,./src/main.js必须在<div id="app"></div>后来引入

<body>
    <div id="app"></div>
    <script src="./src/main.js"></script>
</body>

莲花掌,打完收工,是的,没错,截至了:)
正是那般简单,贰个最精简可进展的Vue工程的营造准备便是那样了,或然很多个人看来此间会疑窦小编并未付诸src/的源码呀,这一局部要怎么写吧?

毫不着急,src/
的源码部分不属于本文探讨的构建部分了,因为这是Vue的组件开发代码,全体Vue项目工程都以一样的。而且既然世界上有github,那么大家相应利用好它,本文中关系的parcel-vue项目工程模板,作者已经上传github开源:parcel-vue,并且为其成立了叁个简便的官网Parcel-VUE官网(那一个官网有本文中涉及的技术方案营造)

叁 、Parcel-VUE模板项目预览

本身个人格外追求极简和进展,以下是Parcel-VUE的模板工程目录结构

├── dist                构建结果
│   └── index.html
├── index.html          首页文件
├── node_modules
├── package.json
├── postcss.config.js   CSS配置
├── src                 开发源码
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   └── router
└── static              静态文件
    ├── css
    ├── img
    └── js

并且作者只制作了二个cli工具用于伊始化Parcel-VUE开发模板

npm install xserver-cli -g
x-cli parcel-vue myproject
cd myproject

开发调节和测试

npm run dev

正规创设

npm run build

后记

官网预览如下,基于iview开发,parcel塑造,第1回创设时间假使 5秒
左右,缓存今后构建在 1秒 左右,热铺排开发调节和测试响应一般 1ms—10ms
左右,相比较webpack(几十秒至几秒钟)实在快太多了

Parcel-VUE官网.png

多谢您的读书,希望本文能够给你带来协理:)

作者:CheneyXu
Github:parcel-vue
关于:Parcel-VUE官网

相关文章

网站地图xml地图