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.state
return (
<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 defined
at index.jsx:5
at index.jsx:14
at Object.parcelRequire.index.jsx.react (index.jsx:29)
at newRequire (src.78399e21.js:47)
at src.78399e21.js:81
at 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的发布，也有很大改善。大家跟着自己口味选择吧。
