Rollup的一些碎碎念

Rollup的一些碎碎念

最近搞的一个函数小工具,是用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的一些碎碎念

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

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

Rollup的一些碎碎念

添加新评论