Parcel（打包）

郤浩慨

2023-12-01

Parcel
	Parcel 是一款完全零配置的前端打包器，它提供了 “傻瓜式” 的使用体验，我们只需了解它提供的几个简单的命令，就可以直接使用它去构建我们的前端应用程序了
	Parcel 是 2017 年发布的，出现的原因是因为当时的 Webpack 使用过于烦琐，文档也不是很清晰明了，所以 Parcel 一经推出就迅速被推上风口浪尖。其核心特点就是：真正做到了完全零配置，对项目没有任何的侵入；自动安装依赖，开发过程更专注；构建速度更快，因为内部使用了多进程同时工作，能够充分发挥多核 CPU 的效率。但是目前看来，如果你去观察开发者的实际使用情况，绝大多数项目的打包还是会选择 Webpack。个人认为原因有两点： Webpack 生态更好，扩展更丰富，出现问题容易解决；随着这两年的发展，Webpack 越来越好用，开发者也越来越熟悉。
快速体验
	npm init 初始化一个项目中的 package.json 文件
	安装Parcel包 npm install parcel-bundler --save-dev
	文件如下：示例一需要先判断一下 module.hot 对象是否存在，如果存在则证明当前环境可以使用 HMR 的 API，那我们就可以使用 module.hot.accept 方法去处理热替换。不过这里的 accept 方法与 Webpack 提供的 HMR 有点不太一样， Webpack 中的 accept 方法支持接收两个参数，用来处理指定的模块更新后的逻辑。而这里 Parcel 提供的 accept 只需要接收一个回调参数，作用就是当前模块更新或者所依赖的模块更新过后自动执行传入的回调函数，这相比于之前 Webpack 中的用法要简单很多
	运行命令 npx parcel src/index.html 执行这个命令，Parcel 就会根据这里传入的参数，先找到 index.html，然后在根据 HTML 中的 script 标签，找到 main.js，最后再顺着 import 语句找到 logger.js 模块，从而完成整体打包 Parcel 命令不仅仅打包了应用，而且还同时开启了一个开发服务器，这就跟 Webpack Dev Server 一样
	模块热替换示例二
	动态导入 import $ from ‘jquery’; 导入Jquery包，保存，会自动导入该包；会自动分包；（未发现自动分包）
	生产模式打包只需要执行 parcel build 然后跟上打包入口文件路径，就可以以生产模式运行打包相同体量的项目打包，Parcel 的构建速度会比 Webpack 快很多。因为 Parcel 内部使用的是多进程同时工作，充分发挥了多核 CPU 的性能 npx parcel build src/index.html dist 目录下就都是本次打包的结果了。这里的输出文件也都会被压缩，而且样式代码也会被单独提取到单个文件中 Webpack 中也可以使用一个叫作 happypack 的插件实现这一点；

// 示例一

.
├── src
│   ├── index.html
│   ├── logger.js
│   └── main.js
└── package.json

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>
<script src="main.js"></script>

// ./src/logger.js
export const log = msg => {
  console.log('---------- INFO ----------')
  console.log(msg)
}


// ./src/main.js
import { log } from './logger'
log('hello parcel')

// 示例二 热更新

// ./src/main.js
import { log } from './logger'
log('hello parcel去')
// HMR API
if (module.hot) {
  module.hot.accept(() => {
    console.log('HMR～')
  })
}

github

Parcel
	Parcel 是一款完全零配置的前端打包器，它提供了 “傻瓜式” 的使用体验，我们只需了解它提供的几个简单的命令，就可以直接使用它去构建我们的前端应用程序了
	Parcel 是 2017 年发布的，出现的原因是因为当时的 Webpack 使用过于烦琐，文档也不是很清晰明了，所以 Parcel 一经推出就迅速被推上风口浪尖。其核心特点就是：真正做到了完全零配置，对项目没有任何的侵入；自动安装依赖，开发过程更专注；构建速度更快，因为内部使用了多进程同时工作，能够充分发挥多核 CPU 的效率。但是目前看来，如果你去观察开发者的实际使用情况，绝大多数项目的打包还是会选择 Webpack。个人认为原因有两点： Webpack 生态更好，扩展更丰富，出现问题容易解决；随着这两年的发展，Webpack 越来越好用，开发者也越来越熟悉。
快速体验
	npm init 初始化一个项目中的 package.json 文件
	安装Parcel包 npm install parcel-bundler --save-dev
	文件如下：示例一需要先判断一下 module.hot 对象是否存在，如果存在则证明当前环境可以使用 HMR 的 API，那我们就可以使用 module.hot.accept 方法去处理热替换。不过这里的 accept 方法与 Webpack 提供的 HMR 有点不太一样， Webpack 中的 accept 方法支持接收两个参数，用来处理指定的模块更新后的逻辑。而这里 Parcel 提供的 accept 只需要接收一个回调参数，作用就是当前模块更新或者所依赖的模块更新过后自动执行传入的回调函数，这相比于之前 Webpack 中的用法要简单很多
	运行命令 npx parcel src/index.html 执行这个命令，Parcel 就会根据这里传入的参数，先找到 index.html，然后在根据 HTML 中的 script 标签，找到 main.js，最后再顺着 import 语句找到 logger.js 模块，从而完成整体打包 Parcel 命令不仅仅打包了应用，而且还同时开启了一个开发服务器，这就跟 Webpack Dev Server 一样
	模块热替换示例二
	动态导入 import $ from ‘jquery’; 导入Jquery包，保存，会自动导入该包；会自动分包；（未发现自动分包）
	生产模式打包只需要执行 parcel build 然后跟上打包入口文件路径，就可以以生产模式运行打包相同体量的项目打包，Parcel 的构建速度会比 Webpack 快很多。因为 Parcel 内部使用的是多进程同时工作，充分发挥了多核 CPU 的性能 npx parcel build src/index.html dist 目录下就都是本次打包的结果了。这里的输出文件也都会被压缩，而且样式代码也会被单独提取到单个文件中 Webpack 中也可以使用一个叫作 happypack 的插件实现这一点；

Parcel（打包）

相关阅读

相关文章

相关问答

相关文档