Parcel打包React

Parcel介绍

Parcel，官网：parceljs.org。官网上的介绍：极速零配置Web应用打包工具。

什么？对的，你没看错，它标称的零配置打包。

这个打包工具其实在一些大厂，开发 Electron 和 React/Preact 项目还挺有使用频率。

可能，你心想，大名鼎鼎的 Webpack 不拿出来吗？

我们来看看 Parcel 官网的一个打包性能基准测试对比表：

基于一个合理大小的应用，包含1726个模块，6.5M 未压缩大小。在一台有4个物理核心 CPU 的 2016 MacBook Pro 上构建。

打包工具	时间
browserify	22.98s
webpack	20.71s
parcel	9.98s
parcel - with cache	2.64s

是不是很惊讶，6.5MB 的前端应用，能做到初始化打包 10秒 以下，后续打包带着缓存执行能够做到 3秒以下。那这样的速度，在前端开发上，岂不是要起飞！

话不多说，不试试你甘心吗，你敢信吗？

刚好前几天React更新了17.0.1最新版，我们来挑战下，是否能成功运行！

项目初始化

1. 创建项目文件夹

# Windows 下命令提示符
md parcel-demo
# macOS / Linux 等类 UNIX 操作系统终端
mkdir parcel-demo

首先，我们先创建一个空目录，作为我们的项目根路径。

2. 初始化npm项目

cd parcel-demo
npm init -y

3. 准备项目基本文件

HTML 入口默认文件

路径：src/index.html

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Parcel 测试</title>
</head>
<body><div id="root"></div><script src="./index.jsx"></script>
</body>
</html>

JSX入口组件渲染文件

路径：src/index.jsx

import React, { Component } from 'react'
import ReactDOM from 'react-dom'class App extends Component {render(){const { count } = this.statereturn (<div><h1>Hello World!</h1></div>)}
}ReactDOM.render(<App />, document.querySelector('#root'))

目录结构如下

/
├─src
│   ├─ index.html
│   └─ index.jsx
└─package.json

然后，就可以正式进入 Parcel 的使用环节了！

安装 Parcel打包工具（parcel）

1. 安装

当前版本：1.12.4

npm i -g parcel

2. 启动项目

parcel src/index.html

没错，我们除了安装 Parcel 打包工具，没有安装任何别的包。

项目启动后，会观察到，它居然在自动安装react、react-dom这2个包！

而且整个过程就几秒！

3. 浏览项目

当项目进入运行状态，他会提示：

Server running at http://localhost:1234
√  Built in 319ms.

我们用Ctrl+鼠标左键，点击域名：http://localhost:1234，就能进入浏览器，查看项目。

成功！大大的h1 标签Hello World!，程序员的第一次快乐！

而且我们修改代码文件内容，它会热更新和渲染页面，nice的很嘛！

4. 查看项目包依赖

package.json

"dependencies": {"react": "^17.0.1","react-dom": "^17.0.1"
},

说明他真的自动安装依赖包，我们只需要安安心心写代码就行了！

这也太智能了吧！

进阶配置

等等，不是说好等零配置吗？？？

对呀，Parcel本身是零配置，但是不代表它运行的语法转换器（babel）不需要配置，哈哈，开了个大玩笑。

好吧，我们看看如果我们稍微偏业务功能会出现什么问题。

1. 支持异步函数

改写组件，增加异步代码

我们来给页面组件写个异步进行自增加 1 的函数，而且内部用异步代码实现：

改写：src/index.jsx，将 App 组件改造成如下。

class App extends Component {state = {// 数量统计状态。count: 0}// 自增加 1 事件处理函数。async incrementHandler(){const {count} = this.state;await new Promise((ok, err) => ok());// resolve 延迟执行状态修改。setTimeout(() => this.setState({count: count + 1}), 500);}render(){const { count } = this.state;return (<div>{/* 数量展示 */}<div>{count}</div>{/* 修改数量的按钮，并绑定事件处理函数 */}<button onClick={this.incrementHandler.bind(this)}>+1</button></div>)}
}

运行

当这次保存后，查看页面。

一年懵逼对吧，怎么就白板了~~~

我们打开开发者工具（F12），发现控制台（Console）打出一句大大的红色错误：

index.jsx:5 Uncaught ReferenceError: regeneratorRuntime is not definedat index.jsx:5at index.jsx:14at Object.parcelRequire.index.jsx.react (index.jsx:29)at newRequire (src.78399e21.js:47)at src.78399e21.js:81at src.78399e21.js:120

regeneratorRuntime是个什么东西？再生成器，看来就是异步函数这类异步代码出问题了。

据查阅是有个babel的插件叫transform-runtime没有在开发阶段提供高级语法等支持。

那我们开始给我们等项目添砖加瓦吧！（说好的零配置，呜呜呜~）

进入 bebel 官网找配置项目节点。

进入 bebel 官网https://babeljs.io去看看，

Usage
- transform-runtime

点开transform-runtime页面，它标注我们需要添加一个特殊的插件配置项在Babel的运行起始。

创建.babelrc文件

根路径：.babelrc

拷贝官网给的配置内容粘贴到

{"plugins": ["@babel/plugin-transform-runtime"]
}

重新运行项目

注意：有些童鞋的电脑可能需要删除根目录下的缓存文件夹**.cache**，甚至需要重新运行2次项目。（不知道是什么bug）

重新运行项目，刷新浏览器，nice！布局出来了。

那么，我们点击【+1】按钮。

非常好！异步延迟500毫秒数据加一成功！

2. 配置 npm 快速编译

如果我们每次都parcel src/index.html那似乎也太麻烦了，而且，如果我们希望这么好用的Parcel能做成我们自己的脚手架，可能还不是-g全局安装，所以我们应该配置一个启动脚本。新版的 VS Code 还能识别到脚本，且点一下就能执行，它不香吗？嗯，真香！

追加一条脚本启动命令

"scripts": {"start": "parcel src/index.html"
},

完整写法

build 的参数就是打包压缩的效果，适合用于项目部署哦

"scripts": {"start": "parcel --public-url . src/index.html","build": "parcel build --public-url . src/index.html"
},

快速运行当前项目

npm start

OK！一切搞定！

总结

当然Parcel的配置本身没有什么要做的，主要等复杂点在于Babel等一系列工具链等配置和使用，整个需要我们平时积累和不断学习，掌握了不同框架、不同库它本身等运行特点才能用好这些方便等工具，不然反而给自己增添了折腾的麻烦，甚至是开发风险。

当然，如果你的项目没有给你足够的时间去折腾，那么还是老老实实用 React 官方脚手架 create-react-app去做也许更好，而且最近跟着React 17的发布，也有很大改善。大家跟着自己口味选择吧。

想查看更多的文章请关注公众号：IT巡游屋