之前有写过一篇 webpack 之外的另一种选择：rollup，这次算是姊妹篇，介绍另外一个工具 parcel.
现在前端打包基本上都会用 webpack，但经常使用 webpack 的开发者基本都有一个体会：配置比较复杂，尤其是有很多项目的时候，更新需要到处改配置。
parcel 便提供了一个额外的选择，对于不喜欢配置的开发者尤其友好，因为 parcel 没有配置文件，仅有的少量配置项也是从命令行输入。另外 parcel 会自动识别安装在 package.json 中的 parcel 插件，然后导入，而无需手动配置。
# 全局
npm install -g parcel-bundler
# 本地
npm install --save-dev parcel-bundler
parcel 可以使用任何类型的文件作为入口，但一般是以 HTML 或 JavaScript 文件作为入口文件。
当以一个 html 文件作为入口进行开发时，在 html 文件中，你可以声明多个 js 入口文件，也可以声明多个 css 入口文件，也可以加载其他的静态资源（如图片）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./index.css"> <!-- css 入口文件 -->
<link rel="stylesheet" href="./index2.css"> <!-- css 入口文件 2 -->
</head>
<body>
<img src="./images/background.jpg"> <!-- 加载图片 -->
<script src="./index.js"></script> <!-- js 入口文件 -->
<script src="./index2.js"></script> <!-- js 入口文件 2 -->
</body>
</html>
但一般都会只有一个 js 入口，css 使用 js 来加载。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./index.js"></script> <!-- js 入口文件 -->
</body>
</html>
运行开发命令
parcel path/to/target.html
打包
parcel build path/to/target.html
以一个 js 文件作为入口进行开发也是类似的，可以参考官方文档 https://parceljs.org/。
与 webpack 相比，零配置是 parcel 最大的特点与优势，但 parcel 没有 webpack 功能强大，也缺少了些灵活性。
更多博客，查看 https://github.com/deepraining/blogs
版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）