用 Rollup 进行打包(组件库)

支持打包的文件格式

amd - 异步模块加载，适用于 RequireJS 等模块加载器支持浏览器
cjs – CommonJS，适用于 Node 环境和其他打包工具（别名：commonjs）不支持浏览器
es – 将 bundle 保留为 ES 模块文件，适用于其他打包工具，以及支持
iife – 自执行函数，适用于
umd – 通用模块定义规范，同时支持 amd，cjs 和 iife
system – SystemJS 模块加载器的原生格式（别名：systemjs）

其中，amd 为 AMD 模块标准，cjs 为 CommonJS 模块标准，esm\es 为 ES 模块标准，iife 为立即调用函数，umd 同时支持 amd、cjs 和 iife。

插件

@rollup/plugin-typescript

import typescript from '@rollup/plugin-typescript';

export default {
  plugins: [typescript({ compilerOptions: {lib: ["es5", "es6", "dom"], target: "es5"}})]
};

rollup-plugin-typescript2

跟上面插件一样编译速度慢一些

import typescript from 'rollup-plugin-typescript2';

export default {
  plugins: [
    typescript(/*{ plugin options }*/)
  ]
}

rollup-plugin-esbuild (推荐)

该插件可以用来替换 rollup-plugin-typescript2, @rollup/plugin-typescript 和 rollup-plugin-terser

注该插件不支持路径别名，需要 @rollup/plugin-alias 插件支持

yarn add esbuild rollup-plugin-esbuild --dev

import esbuild from 'rollup-plugin-esbuild'

export default {
  plugins: [
    esbuild({
      // All options are optional
      include: /\.[jt]sx?$/, // default, inferred from `loaders` option
      exclude: /node_modules/, // default
      sourceMap: true, // default
      minify: process.env.NODE_ENV === 'production',
      target: 'es2017', // default, or 'es20XX', 'esnext'
      jsx: 'transform', // default, or 'preserve'
      jsxFactory: 'React.createElement',
      jsxFragment: 'React.Fragment',
      // Like @rollup/plugin-replace
      define: {
        __VERSION__: '"x.y.z"',
      },
      tsconfig: 'tsconfig.json', // default
      // Add extra loaders
      loaders: {
        // Add .json files support
        // require @rollup/plugin-commonjs
        '.json': 'json',
        // Enable JSX in .js files too
        '.js': 'jsx',
      },
    }),
  ],
}

@rollup/plugin-node-resolve

让 rollup 能够处理外部依赖。用于使用 node_modules 中的第三方模块

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    nodeResolve()
  ]
};

rollup-plugin-peer-deps-external

自动将 peerDependencies(也支持dependencies) 中的模块声明为 externals。

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
export default {
  plugins: [
    // Preferably set as first plugin.
    peerDepsExternal({
      packageJsonPath: 'my/folder/package.json'
      includeDependencies: true,
    }),
  ],
}

rollup-plugin-node-externals

自动将 node 内建模块声明为externals，同时也支持dependencies。

import nodeExternals from 'rollup-plugin-node-externals'

export default {
  ...
  plugins: [
    nodeExternals({

      // Make node builtins external. Default: true.
      builtins?: boolean

      // node: prefix handing for importing Node builtins. Default: 'add'.
      builtinsPrefix?: 'add' | 'strip' | 'ignore'

      // The path(s) to your package.json. See below for default.
      packagePath?: string | string[]

      // Make pkg.dependencies external. Default: true.
      deps?: boolean

      // Make pkg.devDependencies external. Default: false.
      devDeps?: boolean

      // Make pkg.peerDependencies external. Default: true.
      peerDeps?: boolean

      // Make pkg.optionalDependencies external. Default: true.
      optDeps?: boolean

      // Modules to force include in externals. Default: [].
      include?: string | RegExp | (string | RegExp)[]

      // Modules to force exclude from externals. Default: [].
      exclude?: string | RegExp | (string | RegExp)[]
    })
  ]
}

@rollup/plugin-commonjs

转换CommonJS模块为 ES6，让你能在项目里导入 commonjs 格式的文件/模块

import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [commonjs()]
};

@rollup/plugin-babel

通过 Babel 能将你所写的 es6/es7 代码编译转换为 es5 ，以适用那些更古老的浏览器

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

export default {
  plugins: [babel({
    babelHelpers: 'bundled',
    presets: ['@babel/preset-env'],
    // 禁止使用本地.babelrc文件配置
    babelrc: false,
    // 注意配置 文件后缀，否则该插件匹配不到相应的文件后缀
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss'],
  })]
};

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ]
}

rollup-plugin-postcss

默认集成了对 css、scss、less、stylus 的支持。

需要安装 postcss 以及对应的样式支持(sass, less等)

import postcss from 'rollup-plugin-postcss'

export default {
  plugins: [
    postcss({
      plugins: []
    })
  ]
}

autoprefixer

给css 加前缀

新建 .browserslistrc 添加如下：

> 0.25%
not dead
ie 10
chrome 45
ios 9
android 4.4

或者添加到 package.json 文件中的 browserslist 字段中

import autoprefixer from "autoprefixer";

export default {
  plugins: [
    postcss({
      plugins: [autoprefixer()]
    })
  ]
}

postcss-preset-env

该插件预设了polyfills和Autoprefixer插件

新建 postcss.config.js 文件

module.exports = {
  // Add you postcss configuration here
  plugins: [require("postcss-preset-env")],
};

可以替换掉上面 autoprefixer 插件方式

cssnano

// postcss.config.js

module.exports = {
  // Add you postcss configuration here
  plugins: [require("cssnano")],
};

postcss-csso

基于 csso 压缩

// postcss.config.js

module.exports = {
  // Add you postcss configuration here
  plugins: [require("postcss-csso")],
};

@rollup/plugin-image

用于处理导入JPG、PNG、GIF、SVG和WebP文件

import image from '@rollup/plugin-image';

export default {
  plugins: [image()]
};

@rollup/plugin-json

用于处理导入的JSON文件

import json from '@rollup/plugin-json';

export default {
  plugins: [json()]
};

rollup-plugin-copy

基于glob匹配规则，拷贝文件和目录

import copy from 'rollup-plugin-copy'

export default {
  plugins: [
    copy({
      targets: [
        { src: 'src/index.html', dest: 'dist/public' },
        { src: ['assets/fonts/arial.woff', 'assets/fonts/arial.woff2'], dest: 'dist/public/fonts' },
        { src: 'assets/images/**/*', dest: 'dist/public/images' }
      ]
    })
  ]
}

@rollup/plugin-strip

用于从代码中删除debugger语句和函数，如assert.equal和console.log

import strip from '@rollup/plugin-strip';

export default {
  plugins: [
    strip({
      labels: ['unittest']
    })
  ]
};

rollup-plugin-clear

清理 dist

import clear from 'rollup-plugin-clear'
 
export default  {
  plugins: [
    clear({
      // required, point out which directories should be clear.
      targets: ['some directory'],
      // optional, whether clear the directores when rollup recompile on --watch mode.
      watch: true, // default: false
    })
  ]
}

@rollup/plugin-replace

替换打包文件中的目标字符串

import replace from '@rollup/plugin-replace';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
      __buildDate__: () => JSON.stringify(new Date()),
      __buildVersion: 15
    })
  ]
};

@rollup/plugin-alias

可以让你在开始时使用别名来导入文件

import alias from '@rollup/plugin-alias';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    alias({
      entries: [
        { find: '@', replacement: './src' },
      ]
    })
  ]
};