Web-Bundler-CheatSheet

题注：Web Bundler CheatSheet 属于 Awesome-CheatSheet 系列，盘点数个常用的开发打包工具清单。欢迎加入阿里南京前端团队，欢迎关注阿里南京技术专刊了解更多讯息。

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开发实战/进阶篇。

NPM & Yarn

yarn config set registry https://registry.npm.taobao.org -g
yarn config set disturl https://npm.taobao.org/dist -g
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ -g
yarn config set chromedriver_cdnurl https://cdn.npm.taobao.org/dist/chromedriver -g
yarn config set operadriver_cdnurl https://cdn.npm.taobao.org/dist/operadriver -g
yarn config set fse_binary_host_mirror https://npm.taobao.org/mirrors/fsevents -g

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>

然后使用 parcel index.html 运行开发服务器即可。Parcel中同样也是支持异步加载的，假设我们将部分代码定义在someModule.js文件中，然后在用户真实需要时再进行加载：

// someModule.js
console.log("someModule.js loaded");
module.exports = {
  render: function (element) {
    element.innerHTML = "You clicked a button";
  },
};

在入口文件中使用import进行异步加载：

console.log("index.js loaded");
window.onload = function () {
  document.querySelector("#bt").addEventListener("click", function (evt) {
    console.log("Button Clicked");
    import("./someModule").then(function (page) {
      page.render(document.querySelector(".holder"));
    });
  });
};

最后值得一提的是，Parcel内建支持WebAssembly与Rust，通过简单的import导入，即可以使用WASM模块：

// synchronous import
import { add } from "./add.wasm";
console.log(add(2, 3));

// asynchronous import
const { add } = await import("./add.wasm");
console.log(add(2, 3));

// synchronous import
import { add } from "./add.rs";
console.log(add(2, 3));

// asynchronous import
const { add } = await import("./add.rs");
console.log(add(2, 3));

这里add.rs是使用Rust编写的简单加法计算函数：

#[no_mangle]
pub fn add(a: i32, b: i32) -> i32 {
  return a + b
}

Rollup + Microbundle

Rollup是较为为纯粹的模块打包工具，其相较于Parcel与Webpack等，更适合于构建Library，譬如React、Vue.js、Angular、D3、Moment、Redux等一系列优秀的库都是采用Rollup进行构建。。Rollup能够将按照ESM(ES2015 Module)规范编写的源码构建输出为IIFE、AMD、CommonJS、UMD、ESM等多种格式，并且其较早地支持Tree Shaking，Scope Hoisting等优化特性，保证模块的简洁与高效。这里我们使用的Rollup示例配置项目存放在了 fe-boilerplate/rollup。最简单的rollup.config.js文件配置如下：

export default {
  // 指定模块入口
  entry: "src/scripts/main.js",
  // 指定包体文件名
  dest: "build/js/main.min.js",
  // 指定文件格式
  format: "iife",
  // 指定 SourceMap 格式
  sourceMap: "inline",
};

如果我们只是对简单的 sayHello 函数进行打包，那么输出的文件中也只是会简单地连接与调用，并且清除未真实使用的模块：

(function() {
  'use strict';
  ...
  function sayHelloTo(name) {
    ...
  }
  ...
  const result1 = sayHelloTo('Jason');
  ...
})();
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...

Rollup同样具有丰富的插件系统，在 fe-boilerplate/rollup 中我们也引入了常见的别名、ESLint、环境变量定义、包体压缩与分析等插件。这里我们以最常用的Babel与TypeScript为例，如果我们需要在项目中引入Babel，则同样在根目录配置 .babelrc 文件，然后引入rollup-plugin-babel插件即可：

import { rollup } from 'rollup';
import babel from 'rollup-plugin-babel';

rollup({
  entry: 'main.js',
  plugins: [
    babel({
      exclude: 'node_modules/**'
    })
  ]
}).then(...)

对于TypeScript则是引入rollup-plugin-typescript插件：

import typescript from "rollup-plugin-typescript";

export default {
  entry: "./main.ts",

  plugins: [typescript()],
};

Microbundle 则是Developit基于Rollup封装的零配置的轻量级打包工具，其目前已经内建支持TypeScript与Flow，不需要额外的配置；笔者在 js-swissgear/x-fetch 项目的打包中也使用了该工具。

{
  "scripts": {
    "build": "microbundle",
    "dev": "microbundle watch"
  }
}

index.js是CommonJS模块，是Node.js内置的模块类型，使用类似于 require('MyModule') 语法导入
index.m.js是ECMAScript模块，使用类似于 import MyModule from 'my-module' 语法导入
index.umd.js是UMD模块
index.d.ts是TypeScript的类型声明文件

Webpack

作为著名的打包工具，Webpack允许我们指定项目的入口地址，然后自动将用到的资源，经由Loader与Plugin的转换，打包到包体文件中。Webpack相关的项目模板可以参考：fe-boilerplate/react-webpack, fe-boilerplate/react-webpack-ts, fe-boilerplate/vue-webpack 等。

Webpack目前也支持零配置运行

$ npm install webpack webpack-cli webpack-dev-server --save-dev

"scripts": {
  "start": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
},

基础配置

const config = {
  // 定义入口
  entry: {
    app: path.join(__dirname, "app"),
  },
  // 定义包体文件
  output: {
    // 输出目录
    path: path.join(__dirname, "build"),

    // 输出文件名
    filename: "[name].js",
    // 使用 hash 作为文件名
    // filename: "[name].[chunkhash].js",
  },
  // 定义如何处理
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  // 添加额外插件操作
  plugins: [new webpack.DefinePlugin()],
};

Webpack同样支持添加多个配置：

module.exports = [{
  entry: './app.js',
  output: ...,
  ...
}, {
  entry: './app.js',
  output: ...,
  ...
}]

我们代码中的require与import解析规范，则由resolve模块负责，其包含了扩展、别名、模块等部分：

const config = {
  resolve: {
    alias: {
      /*...*/
    },
    extensions: [
      /*...*/
    ],
    modules: [
      /*...*/
    ],
  },
};

资源加载

const config = {
  module: {
    rules: [
      {
        // **Conditions**
        test: /\.js$/, // Match files
        enforce: "pre", // "post" too

        // **Restrictions**
        include: path.join(__dirname, "app"),
        exclude: (path) => path.match(/node_modules/),

        // **Actions**
        use: "babel-loader",
      },
    ],
  },
};

// Process foo.png through url-loader and other matches
import "url-loader!./foo.png";

// Override possible higher level match completely
import "!!url-loader!./bar.png";

babel-loader或者awesome-typescript-loader来处理JavaScript或者TypeScript文件

/******/ (function(modules) { // webpackBootstrap
...
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ((text = "Hello world") => {
  const element = document.createElement("div");

  element.innerHTML = text;

  return element;
});

/***/ })
/******/ ]);

use: ["style-loader", "css-loader"] css-loader会自动地解析@import与url()，而style-loader则会将CSS注入到DOM中，并且实现HMR的特性，而对于SASS、LESS等CSS预处理器，也有专门的sass-loader或者less-loader来处理；在生产环境下，我们也常常会将CSS抽取到独立的样式文件中，此时就可以使用mini-css-extract-plugin (MCEP)等工具。同样，我们可以使用url-loader/file-loader来处理图片等资源文件，

代码分割

代码分割是提升Web性能表现的重要分割，我们常做的代码分割也分为公共代码提取与按需加载等方式。公共代码提取即是将第三方渲染模块或者库与应用本身的逻辑代码分割，或者将应用中多个模块间的公共代码提取出来，划分到独立的Chunk中，以方便客户端进行缓存等操作。

SplitChunksPlugin

不同于Webpack 3中需要依赖CommonChunksPlugin进行配置，Webpack 4引入了 SplitChunksPlugin，并为我们提供了开箱即用的代码优化特性，Webpack会根据以下情况自动进行代码分割操作：

新的块是在多个模块间共享，或者来自于node_modules目录；
新的块在压缩之前的大小应该超过30KB；
页面所需并发加载的块数量应该小于或者等于5；
初始页面加载的块数量应该小于或者等于3；

SplitChunksPlugin的默认配置如下：

splitChunks: {
    // 通用配置
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,

    // 自定义配置，会覆写通用配置
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },

    // 默认的切割规则
    default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

当两个chunk包含了相同代码时，会生成 chunka~index~chunkb 等类似的代码，值得一提的是，这里的chunks选项有initial,async与 all 三个配置，上述配置即是分别针对初始chunks、按需加载的chunks与全部的chunks进行优化；如果将vendors的chunks设置为 initial，那么它将忽略通过动态导入的模块包包含的第三方库代码。而priority则用于指定某个自定义的Cache Group捕获代码的优先级，其默认值为0。在 common-chunk-and-vendor-chunk 例子中，我们即针对入口进行优化，提取出入口公共的vendor模块与业务模块：

{
splitChunks: {
			cacheGroups: {
				commons: {
					chunks: "initial",
					minChunks: 2,
					maxInitialRequests: 5, // The default limit is too small to showcase the effect
					minSize: 0 // This is example is too small to create commons chunks
				},
				vendor: {
					test: /node_modules/,
					chunks: "initial",
					name: "vendor",
					priority: 10,
					enforce: true
				}
			}
		}
}

Webpack的optimization还包含了runtimeChunk属性，当该属性值被设置为true时，即会为每个Entry添加仅包含运行时信息的Chunk；当该属性值被设置为single时，即为所有的Entry创建公用的包含运行时的Chunk。

import

我们也可以在代码中使用import语句，动态地进行块划分，实现代码的按需加载：

// Webpack 3 之后支持显式指定 Chunk 名
import(/* webpackChunkName: "optional-name" */ "./module")
  .then((module) => {
    /* ... */
  })
  .catch((error) => {
    /* ... */
  });

webpackJsonp([0], {
  KMic: function(a, b, c) {
    ...
  },
  co9Y: function(a, b, c) {
    ...
  },
});

如果是使用React进行项目开发，推荐使用 react-loadable 进行组件的按需加载，他能够优雅地处理组件加载、服务端渲染等场景。Webpack还内建支持基于ES6 Module规范的Tree Shaking优化，即仅从导入文件中提取出所需要的代码。

更多关于Webpack的使用技巧可以参阅 Webpack CheatSheet 或者现代Web全栈开发与工程架构/Webpack 章节。

Backpack

Backpack是面向Node.js的极简构建系统，受create-react-app, Next.js以及Nodemon的影响，能够以零配置的方式创建Node.js项目。Backpack为我们处理了文件监控、热加载、转换、打包等工作，默认支持ECMAScript最新的async/await,对象扩展、类属性等语法。我们可以使用npm安装依赖：

$ npm i backpack-core --save

然后在package.json中配置运行脚本：

{
  "scripts": {
    "dev": "backpack",
    "build": "backpack build"
  }
}

在 Backend-Boilerplate/node 中可以查看Backpack的典型应用，我们也可以覆盖默认的Webpack配置：

// backpack.config.js
module.exports = {
  webpack: (config, options, webpack) => {
    // Perform customizations to config
    // Important: return the modified config
    return config;
  },
};

或者添加Babel插件：

{
  "presets": ["backpack-core/babel", "stage-0"]
}

Module Loader |模块加载器

SystemJS

Configurable module loader enabling backwards compatibility workflows for ES modules in browsers.

<script type="systemjs-packagemap">
  {
    "packages": {
      "lodash": "https://unpkg.com/lodash@4.17.10/lodash.js"
    }
  }
</script>
<!-- Alternatively:
<script type="systemjs-packagemap" src="path/to/map.json">
-->
<!-- SystemJS must be loaded after the package map -->
<script src="system.js"></script>
<script>
  System.import("/js/main.js");
</script>

To load ES modules directly in older browsers with SystemJS we can install and use the Babel plugin:

<script src="system.js"></script>
<script src="extras/transform.js"></script>
<script src="plugin-babel/dist/babel-transform.js"></script>
<script>
  // main and all its dependencies will now run through transform before loading
  System.import("/js/main.js");
</script>

import moment from "moment";

export function test() {
  const m1 = moment().format("LLL");
  const m2 = moment().fromNow();
  return `The moment is ${m1}, which was ${m2}`;
}

const SystemJS = require("systemjs");

SystemJS.config({
  map: {
    traceur: "node_modules/traceur/bin/traceur.js",
    moment: "node_modules/moment/src",
  },
  packages: {
    moment: {
      main: "moment.js",
    },
  },
});

SystemJS.import("./test.js")
  .then(function (test) {
    var t = test.test();
    console.log(t);
  })
  .catch(function (e) {
    console.error(e);
  });

RequireJS

最近更新于0001-01-01