Parcel-VUE零配置前端构建（iview实践）

时间 2019-11-17

标签 parcel vue 配置前端构建 iview 实践繁體版

原文原文链接

前言

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

本来寄指望于webpack可以一统天下，但伴随着webpack愈加复杂臃肿，我对于它的发展实在没有太多的信心，并不是功能越强大越完整就是最合理，往往看着vue-cli的webpack官方模板都包含了七八个配置文件，每一个文件内各类形形色色的逻辑配置，甚至超过了业务代码的复杂度，那么维护配置自己，就已然是一件工程量巨大的工做，难道将来还须要再出另一门语言来单独管理配置吗？css

前端零配置的需求愈来愈高，parcel为前端构建带来了革命性的变化，很庆幸对于Parcel的发现，由于它将我从前端繁杂的配置中解放出来，而我也但愿本文可以为和我有一样烦恼和困惑的读者们，获得答案html

思路

对于Parcel的实践，本文基于Vue以及其衍生出来的组件框架iView 一个最简单，通用，可拓展的Vue前端工程应该由如下部分组成，其中，index.html是单页文件，src/是Vue组件源码，package.json是依赖包管理前端

index.html

src/

package.json

是的，没错，几乎不可能再简化了，也不能再增长了，以上就是一个前端Vue通用工程的所有，考虑到现实工程还须要一些兼容和拓展，咱们还须要如下部分功能vue

.babelrc（废弃）

postcss.config.js（废弃）

其中，.babelrc实现编码转换兼容浏览器，postcss.config.js实现CSS编码转换兼容浏览器，我真的很担忧我继续再写出还有其他不可或缺的部分，可是幸运的是，没有了，真的没有了，以上就是一个最最最精简且可拓展的Vue组件化前端工程的组成部分* （事实证实仍是能够再简化的，parcel1.7.0版本开始原生支持VUE构建，不须要任何插件中转处理了，该步骤废弃）java

实践

传统而言，为了让以上5个组成部分的融合，咱们须要使用webpack进行大量，不，海量的复杂配置，让其可以正常工做，这也就是vue-cli的webpack开发模板中build文件夹，config文件夹，以及其package.json中一长串的依赖包的由来node

可是如今，什么都不须要了，由于parcel已经完成了全部的工做，全部在index.html中的依赖都会被全自动解析和处理，由于这本应该就是【程序】的意义，释放人类重复的逻辑工做webpack

咱们惟一须要作的就是在packge.json中引入parcel，不过遗憾的是，parcel尚未正式完成对vue的支持工做，不过还好已经有第三方的转换插件推出，并且parcel的插件机制极为优雅，咱们只须要进一步引入parcel-plugin-vue（废弃，再也不须要parcel-plugin-vue）ios

一、引入构建依赖

解释一下如下依赖：git

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"
  }
复制代码

二、在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构建，首次构建时间只要 5秒左右，缓存之后构建在 1秒左右，热部署开发调试响应通常 1ms—10ms 左右，相比webpack(几十秒至几分钟)实在快太多了

感谢你的阅读，但愿本文可以给你带来帮助：）

做者：CheneyXu

Github：parcel-vue

关于：Parcel-VUE官网