Parcel号称极速零配置Web应用打包工具,相比于webpack的复杂性,Parcel确实为我们省去了很多配置。使用过facebook/create-react-app的同学应该会发现,creat-react-app也简化了配置,其包含react-scripts包,这个包做的事正与Parcel类似:将所有的打包配置统筹、封装。在上一篇有关async/await的文章中有提到Parcel,请原谅我没有按顺序出牌。
1 Parcel基本用法
1.1 安装Parcel
全局安装Parcel:
安装Parcel
1.2 创建、运行项目
创建文件夹,并在文件夹下新建入口html和js文件,html引入入口js文件。
index.html
index.js
在文件夹下初始化项目:
初始化项目
启动服务,开始开发:
启动服务
2 项目迁移
我们现在可能更关心旧webpack项目可不可以用Parcel打包。我们现在进行尝试一下。
2.1 改造vue-cli webpack模板项目
我们首先使用vue-cli创建一个项目:
创建vue-cli webpack项目
首先进入项目运行一下npm run dev,检查是否能运行成功,OK!运行成功。然后我们直接运行:
parcel index.html
DANG! DANG!
直接运行Parcel
emmmmm…
好像没有将main.js引入html文件。改!
import路径错误
修改引用路径。重启服务,出现错误:
vue包不完整
由于我们在App.vue中使用了template函数,而
mport Vue from 'vue'
默认引用的运行时态版(不支持template函数),所以需要改用vue完整版。修改main.js和router/index.js文件中vue的引用。
vue使用完整版
再来运行一次parcel index.html便成功了,可以正常开发了。
3 小缺陷
Parcel目前支持CommonJS 和 ES6 两种模块语法,所以,如果你在index.html页面引入了项目中非上述两种模块语法开发的js,那么可能会出现意外情况。如果还是想引入非CommonJS和ES6模块语法开发的js,目前可以有两种解决方法:
如果有源码,则改造代码
没有源码,并且还是压缩的,将其放在服务器上,html通过域名引用
总结
总体而言,Parcel确实比webpack要简化很多,几乎是开箱即用。对于没有特殊要求的项目,推荐使用。
本文暂时没有评论,来添加一个吧(●'◡'●)