Web Bundler CheatSheet, 选择合适的构建打包工具
作者：CQITer小编 时间：2018-06-01 09:04
Web Bundler CheatSheet | Web 构建与打包工具盘点
工欲善其事，必先利其器，当我们准备开始某个 Web 相关的项目时，合适的脚手架会让我们事半功倍。在 2016-我的前端之路：工具化与工程化一文中，我们讨论了工具化与工程化相关的内容，其中重要的章节就是关于所谓的打包工具。Grunt、Glup 属于 Task Runner，即任务执行器； 实际上，npm package.json 中定义的脚本也可以看做 Task Runner，而 Rollup，Parcel 以及 Webpack 则是属于 Bundler，即打包工具。
尺有所短，寸有所长，不同的构建工具有其不同的适用场景。Webpack 是非常优秀的构建与打包工具，但是其提供了基础且复杂的功能支持，使得并不适用于全部的场景。Parcel 这样的零配置打包工具适合于应用型的原型项目构建，而 Rollup 或者 Microbundle 适合于库的打包，Backpack 则能够帮我们快速构建 Node.js 项目。笔者在本文中列举讨论的仅是日常工作中会使用的工具，更多的 Browserify、Fusebox 等等构建工具查看 Web 构建与打包工具资料索引或者现代 Web 开发实战/进阶篇。
Parcel
Parcel 是著名的零配置的应用打包工具，在 TensorflowJS 或者 gh-craft 等算法实验/游戏场景构建中，都能够快速地搭建应用。
# 安装 Parcel
$ npm install -g parcel-bundler
# 启动开发服务器
$ parcel index.html
# 执行线上编译
$ parcel build index.js
# 指定编译路径
$ parcel build index.js -d build/output
Parcel 会为我们自动地下载安装依赖，并且内置了 ES、SCSS 等常见的处理器。在 fe-boilerplate 中提供了 React, React & TypeScript, Vue.js 等 Parcel 常见的示例，这里以 React 为例，首先定义组件与渲染：
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import logo from '../public/logo.svg';
import './index.css';
const App = () => (
<div className="App">
<img className="App-Logo" src={logo} alt="React Logo" />
<h1 className="App-Title">Hello Parcel x React</h1>
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));
// Hot Module Replacement
if (module.hot) {
module.hot.accept();
}
然后定义入口的 index.html 文件：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parcel React Example</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}