常用插件
注意
注意,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官方插件列表查看更多内容。