[聚合文章] Parcel-VUE零配置前端构建（iview实践）

  1. 首页
  2. 聚合文章
  3. 文章详情
JavaScript 1900-01-01 20 阅读
原文链接: https://www.jianshu.com/p/72f342071305

前言

在我的上一篇文章才刚刚阐述了vue-cli的webpack模板工程构建优化方案和步骤，以及在结尾时对未来前端构建的思考和展望。结果这个时候 Parcel 就横空出世了，目前关于Parcel的文档很少，而且Parcel本身也处于高速迭代发展的实验阶段，但它的确是前端构建的最终解决方案，也许这一次，真的没有之一了

原本寄期望于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

是的，没错，几乎不可能再简化了，也不能再增加了，以上就是一个前端Vue通用工程的全部，考虑到现实工程还需要一些兼容和拓展，我们还需要以下部分功能，其中，.babelrc实现编码转换兼容浏览器，postcss.config.js实现CSS编码转换兼容浏览器

  1. .babelrc
  2. 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

1、引入构建依赖

解释一下以下依赖：
1.1 超高人气的axios是前端AJAX网络请求的不二之选
1.2 vue与vue-router是Vue项目工程的必备
1.3 而本文以iview组件框架为里讲解，所以引入iview
1.4 parcel-bundler和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.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官网（这个官网有本文中提到的技术方案构建）

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 -gx-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官网

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。