如何使用parcel实现零配置打包

June 22, 2020 · One min read

Zhao chen

简介#

parcel，是一款完全零配置的前端打包器。 Parcel 是 2017 年发布，解决了Webpack配置过于繁琐的问题。

parcel核心特点: • 零配置 • 自动安装依赖 • 构建速度更快

快速上手#

yarn init -y
yarn add parcel-bundler --dev
yarn parcel src/index.html
yarn parcel build src/index.html // 打包

虽然 Parcel 跟 Webpack 一样都支持以任意类型文件作为打包入口，不过 Parcel 官方还是建议我们使用 HTML 文件作为入口。官方的理由是 HTML 是应用在浏览器端运行时的入口。

<!-- ./src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>use Parcel</title>
</head>
<body>
</body>
<script src="main.js"></script>
</html>

ES Modules 模块的打包#

// ./src/logger.js
const log = (data) => {
    console.log(data)
}

module.exports = {
    log
}

js入口文件

// ./src/main.js
import { log } from './logger'

log('hello')

模块热替换（HMR）#

Parcel 提供的 accept 只需要接收一个回调参数，作用就是当前模块更新或者所依赖的模块更新过后自动执行传入的回调函数。Webpack 中的 accept 方法支持接收两个参数，用来处理指定的模块更新后的逻辑。

// ./src/main.js
if (module.hot) {
    module.hot.accept(() => {
        console.log('has HMR')
    })
}

自动安装依赖#

// ./src/main.js
import $ from 'jquery';

保存后，会自动安装并添加到package.json 中。

其他类型资源加载#

// ./src/main.css
body{ 
    color: red;
}
// ./src/main.js
import './main.css'

动态导入#

// ./src/main.js
import('jquery').then($ => {
    $(document.body).append('<h2>panda od chengdu</h2>')
})

生产模式打包#

相同体量的项目打包，Parcel 的构建速度会比 Webpack 快很多。因为 Parcel 内部使用的是多进程同时工作，充分发挥了多核 CPU 的性能。

代码

All our posts

简介#