常用插件

WARNING

注意，Rollup中插件的顺序是有要求的，一般会把解析和转换相关的插件写在前面。

Rollup并不像webpack那样强大，它需要和其它插件配合使用才能完成特定的功能，常用的插件有：

@rollup/plugin-commonjs：将CommonJs规范的模块转换为ESM规范，提供Rollup使用。
@rollup/plugin-node-resolve：与@rollup/plugin-commonjs插件一起使用，配合以后就可以使用node_modules下的第三方模块代码了。
@rollup/plugin-babel：把ES6代码转义成ES5代码，需要同时安装@babel/core和@babel/preset-env插件。注意：如果使用了高于ES6标准的语法，例如async/await，则需要进行额外的配置。
@rollup/plugin-terser：代码压缩插件。
@rollup/plugin-json：支持从.json读取信息，配合Rollup的Tree Shaking可只打包.json文件中我们真正用到的部分。

以上插件使用案例如下：

// rollup.config.mjs
import commonjs from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'
import babel from '@rollup/plugin-babel'
import json from '@rollup/plugin-json'
import typescript from '@rollup/plugin-typescript'
import terser from '@rollup/plugin-terser'

const config =  {
  ...省略其它
  plugins: [
    resolve(),
    commonjs(),
    typescript(),
    babel(),
    json(),
    terser()
  ]
}

export default config

以上仅列举最常见的插件，Rollup维护了很多其它plugins，你可点击Rollup官方插件列表open in new window查看更多内容。

# 常用插件

常用插件