rollup 插件的使用及常用插件介绍

rollup 插件的使用及常用插件介绍

如果我们需要打包更为复杂的代码，就需要配置一些插件来实现。比如导入使用 NPM 安装的模块、使用 Babel 编译代码、处理 JSON 文件等等。

插件使用

rollup 是用于打包 JavaScript 的工具，如果我们想处理其他文件，就需要编写插件或者引入一些插件去实现。

普通插件

比如我们想从 JSON 文件中导入数据，可以使用 @rollup/plugin-json。

安装：

npm i @rollup/plugin-json -D

使用：

// rollup.config.js
import { defineConfig } from 'rollup';
import json from '@rollup/plugin-json';

export default defineConfig({
  input: 'index.js',
  output: {
    file: 'bundle.js',
  },
  plugins: [json()],
});

// index.js
import { version } from '../package.json';

console.log(version);

打包结果：

var version = "1.0.0";

function index () {
  console.log('version ' + version);
}

export { index as default };

结果中只导入了我们实际需要的数据 version，而像 name、devDependencies 和 package.json 中其他内容都被忽略了。这就是 rollup 中的 tree shaking 的作用（去除未引用代码）。

输出插件

这些插件是专门用来在 Rollup 的主要分析完成后修改代码。如果使用不兼容的插件作为特定输出插件，Rollup 将会发出警告。

在 output.plugins 中添加插件，一个可能的用例是压缩产物以在浏览器中使用。

我们使用 @rollup/plugin-terser 来压缩输出文件。

安装：

npm i @rollup/plugin-terser -D

使用：

// rollup.config.js
import { defineConfig } from 'rollup';
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';

export default defineConfig({
  input: 'index.js',
  output: [
    {
      file: 'bundle.js',
    },
    {
      file: 'bundle.min.js',
      plugins: [terser()],
    },
  ],
  plugins: [json()],
});

// bundle.min.js
function o(){console.log("version 1.0.0")}export{o as default};

常用插件

我们可以在 插件列表 中查看一些官方组织维护的一些插件。