Parcel(零配置的前端应用打包器)
# 快速上手
使用
yarn init新建一个项目，安装 parcel，parcel 的模块叫做parcel-bundler安装以后在
node_modules/bin目录下就会有 parcel 的 cli添加一个打包入口文件， Parcel 可以使用任何类型的文件作为入口，但是最好还是使用 HTML 或 JavaScript 文件。在
index.html(入口文件)中引入资源，最终都会被 parcel 打包到输出目录中，而且 parcel 也支持 ESM执行
yarn parcel src/index.html，parcel 会打包应用，并且开启开发服务器，还打开了Source Map，同时支持自动刷新
# 模块热替换
parcel 提供两种方法实现 HMR，module.hot.accept和module.hot.dispose
if (module.hot) {
// 需要判断是否存在module.hot
module.hot.dispose(function () {
// 模块即将被替换时
});
module.hot.accept(function () {
// 模块或其依赖项之一刚刚更新时
});
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
这里的 accept 函数和在 webpack 中不同，
- webpack 提供两个参数(模块路径，处理回调函数)，用于处理指定模块更新后的逻辑
- parcel 提供的 accept 只有一个参数，用于在当前模块更新或者当前模块所依赖的模块更新后执行操作
# 自动安装依赖
parcel 还支持自动安装依赖，例如：Parcel 遇到符合 node_module 模式且无法找到它的依赖项时，Parcel 会尝试使用 yarn 或 npm 安装此依赖项。这可以避免开发人员不得不退出 parcel 或打开多个终端窗口来安装依赖。
这只会在development模式下触发(使用 serve 或者 watch)，然而在生产模式是禁止的（使用 build）这样避免在部署的时候产生意想不到的副作用。
可以使用--no-autoinstall来禁止这一特性
# 加载其他类型资源模块
parcel 中加载类似 css 文件、图片等，只需要直接 import，不需要配置，parcel 会自动配置并且打包到 dist 中
# 代码拆分
parcel 也可以使用动态导入来实现代码拆分
# 总结
- parcel 在使用上非常方便，不需要任何配置，所有的一切 parcel 都帮助我们实现了
- 对于相同体量的项目打包, 他比 webpack 快很多, 因为它内部自动使用的是多进程同时工作, 充分发挥了多核 cpu 性能，当然 webpack 中可以使用
happypack工具开启多进程打包 - parcel发布于2017年，主要针对webpack配置繁琐的问题，提供便利打包
- 核心特点：完全零配置, 构建速度快，对项目零侵入