前端进阶（10） - webpack 之外的另一种选择：parcel

webpack 之外的另一种选择：parcel

之前有写过一篇 webpack 之外的另一种选择：rollup，这次算是姊妹篇，介绍另外一个工具 parcel.

现在前端打包基本上都会用 webpack，但经常使用 webpack 的开发者基本都有一个体会：配置比较复杂，尤其是有很多项目的时候，更新需要到处改配置。

parcel 便提供了一个额外的选择，对于不喜欢配置的开发者尤其友好，因为 parcel 没有配置文件，仅有的少量配置项也是从命令行输入。另外 parcel 会自动识别安装在 package.json 中的 parcel 插件，然后导入，而无需手动配置。

1. parcel

1.1 安装

# 全局
npm install -g parcel-bundler

# 本地
npm install --save-dev parcel-bundler

1.2 开发

parcel 可以使用任何类型的文件作为入口，但一般是以 HTML 或 JavaScript 文件作为入口文件。

当以一个 html 文件作为入口进行开发时，在 html 文件中，你可以声明多个 js 入口文件，也可以声明多个 css 入口文件，也可以加载其他的静态资源（如图片）。

但一般都会只有一个 js 入口，css 使用 js 来加载。

运行开发命令

parcel path/to/target.html

打包

parcel build path/to/target.html

以一个 js 文件作为入口进行开发也是类似的，可以参考官方文档 https://parceljs.org/。

2. parcel vs webpack

与 webpack 相比，零配置是 parcel 最大的特点与优势，但 parcel 没有 webpack 功能强大，也缺少了些灵活性。

3. 后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）