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编码转换兼容浏览器

  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 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 必须在

之后引入

    

降龙十八掌,打完收工,是的,没错,结束了:)

就是这么简单,一个最精简可拓展的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官网.png

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

作者:CheneyXu

Github: parcel-vue

关于:Parcel-VUE官网

简书稿源:简书 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Parcel-VUE零配置前端构建(iview实践)

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录