开箱即用的web打包工具Parcel，了解一下?

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要简化很多，几乎是开箱即用。对于没有特殊要求的项目，推荐使用。