Parcel-VUE零配置前端构建（iview实践）
前言
在我的上一篇文章才刚刚阐述了vue-cli的webpack模板工程构建优化方案和步骤，以及在结尾时对未来前端构建的思考和展望。结果这个时候 Parcel 就横空出世了，目前关于Parcel的文档很少，而且Parcel本身也处于高速迭代发展的实验阶段，但它的确是前端构建的最终解决方案，也许这一次，真的没有之一了
原本寄期望于webpack能够一统天下，但伴随着webpack越发复杂臃肿，我对于它的发展实在没有太多的信心，并非功能越强大越完整就是最合理，每每看着vue-cli的webpack官方模板都包含了七八个配置文件，每个文件内各种形形色色的逻辑配置，甚至超过了业务代码的复杂度，那么维护配置本身，就已然是一件工程量巨大的工作，难道未来还需要再出另外一门语言来单独管理配置吗？
前端零配置的需求越来越高，parcel为前端构建带来了革命性的变化，很庆幸对于Parcel的发现，因为它将我从前端繁杂的配置中解放出来，而我也希望本文能够为和我有同样烦恼和困惑的读者们，得到答案
思路
对于Parcel的实践，本文基于Vue以及其衍生出来的组件框架iView
一个最简单，通用，可拓展的Vue前端工程应该由以下部分组成，其中，index.html是单页文件，src/是Vue组件源码，package.json是依赖包管理
index.html
src/
package.json
是的，没错，几乎不可能再简化了，也不能再增加了，以上就是一个前端Vue通用工程的全部，考虑到现实工程还需要一些兼容和拓展，我们还需要以下部分功能，其中，.babelrc实现编码转换兼容浏览器，postcss.config.js实现CSS编码转换兼容浏览器（事实证明还是可以再简化的，parcel1.7.0版本开始原生支持VUE构建，不需要任何插件中转处理了，该步骤废弃）
.babelrc（废弃）
postcss.config.js（废弃）
我真的很担心我继续再写出还有其余不可或缺的部分，但是幸运的是，没有了，真的没有了，以上就是一个最最最精简且可拓展的Vue组件化前端工程的组成部分
实践
传统而言，为了让以上5个组成部分的融合，我们需要使用webpack进行大量，不，海量的复杂配置，让其能够正常工作，这也就是vue-cli的webpack开发模板中build文件夹，config文件夹，以及其package.json中一长串的依赖包的由来
但是现在，什么都不需要了，因为parcel已经完成了所有的工作， 所有在index.html中的依赖都会被全自动解析和处理，因为这本应该就是【程序】的意义，释放人类重复的逻辑工作
我们唯一需要做的就是在packge.json中引入parcel，不过遗憾的是，parcel还没有正式完成对vue的支持工作，不过还好已经有第三方的转换插件推出，而且parcel的插件机制极为优雅，我们只需要进一步引入parcel-plugin-vue（废弃，不再需要parcel-plugin-vue）
1、引入构建依赖
解释一下以下依赖：
1.1 超高人气的axios是前端AJAX网络请求的不二之选
1.2 vue与vue-router是Vue项目工程的必备
1.3 而本文以iview组件框架为里讲解，所以引入iview
1.4 parcel-bundler和parcel-plugin-vue是构建基石（不再需要parcel-plugin-vue）
1.5 less用于支持CSS编码转换（废弃）
1.6 babel-preset-env和babel-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.18.0"
}, "devDependencies": { "babel-preset-env": "^1.6.1",（废弃） "babel-plugin-transform-object-rest-spread": "^6.26.0",（废弃） "less": "^2.7.3",（废弃） "parcel-bundler": "^1.7.0", "parcel-plugin-vue": "^1.5.0",（废弃） "vue": "^2.5.16", "iview": "^2.11.0"
}2、在index.html中引入js依赖
这里需要注意的是，./src/main.js必须在<div id="app"></div>之后引入
<body> <div id="app"></div> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./src/main.js"></script></body>
降龙十八掌，打完收工，是的，没错，结束了：）
就是这么简单，一个最精简可拓展的Vue工程的构建准备就是如此了，也许很多人看到这里会疑问我没有给出src/的源码呀，这一部分要怎么写呢？
不用着急，src/ 的源码部分不属于本文讨论的构建部分了，因为这是Vue的组件开发代码，所有Vue项目工程都是一样的。而且既然世界上有github，那么我们理应利用好它，本文中提到的parcel-vue项目工程模板，我已经上传github开源：parcel-vue，并且为其制作了一个简单的官网Parcel-VUE官网（这个官网有本文中提到的技术方案构建）
3、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 myprojectcd myproject
开发调试
npm run dev
正式构建
npm run build
后记
官网预览如下，基于iview开发，parcel构建，首次构建时间只要 5秒 左右，缓存以后构建在 1秒 左右，热部署开发调试响应一般 1ms—10ms 左右，相比webpack(几十秒至几分钟)实在快太多了
Parcel-VUE官网.png
感谢你的阅读，希望本文能够给你带来帮助：）
作者：CheneyXu
Github：parcel-vue
关于：Parcel-VUE官网
原文链接：https://www.jianshu.com/p/72f342071305
共同学习，写下你的评论
评论加载中...
作者其他优质文章
