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是依赖包管理

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

是的,没错,几乎不可能再简化了,也不能再增加了,以上就是一个前端Vue通用工程的全部,考虑到现实工程还需要一些兼容和拓展,我们还需要以下部分功能,其中,.babelrc实现编码转换兼容浏览器,postcss.config.js实现CSS编码转换兼容浏览器(事实证明还是可以再简化的,parcel1.7.0版本开始原生支持VUE构建,不需要任何插件中转处理了,该步骤废弃

  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(废弃,不再需要parcel-plugin-vue)

1、引入构建依赖

解释一下以下依赖:
1.1 超高人气的axios是前端AJAX网络请求的不二之选
1.2 vuevue-router是Vue项目工程的必备
1.3 而本文以iview组件框架为里讲解,所以引入iview
1.4 parcel-bundlerparcel-plugin-vue是构建基石(不再需要parcel-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.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必须在

之后引入


    

降龙十八掌,打完收工,是的,没错,结束了:)
就是这么简单,一个最精简可拓展的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 myproject
cd myproject

开发调试

npm run dev

正式构建

npm run build

后记

官网预览如下,基于iview开发,parcel构建,首次构建时间只要 5秒 左右,缓存以后构建在 1秒 左右,热部署开发调试响应一般 1ms—10ms 左右,相比webpack(几十秒至几分钟)实在快太多了

Parcel-VUE零配置前端构建(iview实践)_第1张图片
Parcel-VUE官网.png

感谢你的阅读,希望本文能够给你带来帮助:)

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

你可能感兴趣的:(Parcel-VUE零配置前端构建(iview实践))