最近搞的一个函数小工具，是用Rollup进行打包编译的，所以在这里简单的总结一下。

什么是 Rollup：

简单而言, Rollup 是一个模块打包工具, 可以将我们按照 ESM (ES2015 Module) 规范编写的源码构建输出如下格式:

• IIFE: 自执行函数, 可通过 <script> 标签加载
• AMD: 浏览器端的模块规范, 可通过 RequireJS 可加载
• CommonJS: Node 默认的模块规范, 可通过 Webpack 加载
• UMD: 兼容 IIFE, AMD, CJS 三种模块规范
• ESM: ES2015 Module 规范, 可用 Webpack, Rollup 加载

大多数的 Library 也是选择使用 Rollup 构建, 比如: React, Vue, Angular, D3, Moment, Redux…

借助于 Rollup 的插件体系, 我们也可以处理 css, images, font 等资源, 但是 Rollup 不支持代码拆分(Code Splitting)和运行时态加载(Dynamic Import) 特性, 所以较少的应用于 Application 开发.

为什么选择 Rollup

• Tree Shaking: 自动移除未使用的代码, 输出更小的文件
• Scope Hoisting: 所有模块构建在一个函数内, 执行效率更高
• Config 文件支持通过 ESM 模块格式书写

• 可以一次输出多种格式:

  • 不用的模块规范: IIFE, AMD, CJS, UMD, ESM
  • Development 与 production 版本: .js, .min.js
• 文档精简

常规配置

构建命令通常还会区分是开发和生成版本，例如npm scripts：

{
    "start": "cross-env NODE_ENV=development rollup -w -c scripts/rollup.config.dev.js",
    "build": "cross-env NODE_ENV=production rollup -c scripts/rollup.config.prod.js",
}

我这里就没有做区分了，就是简单的命令：

"build": "rollup --config",

rollup.config.js中，我这里是这么配置的：

import json from "rollup-plugin-json";
import typescript from "rollup-plugin-typescript";
import sourceMaps from "rollup-plugin-sourcemaps";
import { terser } from "rollup-plugin-terser";

export default {
  input: "modules/index.ts",
  output: [
    {
      format: "cjs",
      file: "lib/utils.cjs.js",
      sourcemap: false
    },
    {
      format: "cjs",
      file: "lib/utils.cjs.min.js",
      sourcemap: true,
      plugins: [terser()]
    },
    {
      format: "es",
      file: "lib/utils.esm.js",
      sourcemap: false
    },
    {
      format: "es",
      file: "lib/utils.esm.min.js",
      sourcemap: true,
      plugins: [terser()]
    },
    {
      name: 'utils', // umd 模式必须要有 name  此属性作为全局变量访问打包结果
      file: `lib/utils.umd.js`,
      format: 'umd',
      sourcemap: false,
    },
    {
      name: 'utils', // umd 模式必须要有 name  此属性作为全局变量访问打包结果
      file: `lib/utils.umd.min.js`,
      format: 'umd',
      sourcemap: true,
      plugins: [terser()]
    },
  ],
  plugins: [
    json(),
    typescript({
      exclude: "node_modules/**",
      typescript: require("typescript"),
    }),
    sourceMaps()
  ],
};

这里说一下，有些教程推荐使用rollup-plugin-uglify来做代码压缩，但是实际情况，这个插件目前不支持es6，打包的时候会报错，例如这样：

(plugin uglify) Error: Unexpected token: punc «{», expected: punc «;»

解决方案就是使用rollup-plugin-terser：https://www.npmjs.com/package/rollup-plugin-terser

最后放一张打包成功的图片：