如何使用 @rollup/plugin-terser 插件？

推荐答案

// www.javascriptcn.com code example
import { rollup } from 'rollup';
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'iife',
  },
  plugins: [
    terser({
      compress: {
        drop_console: true, // 移除 console.log
      },
    }),
  ],
};

本题详细解读

1. 安装 @rollup/plugin-terser 插件

首先，你需要安装 @rollup/plugin-terser 插件。可以通过 npm 或 yarn 进行安装：

npm install @rollup/plugin-terser --save-dev

或者

yarn add @rollup/plugin-terser --dev

2. 配置 Rollup 使用 Terser 插件

在 Rollup 配置文件中，引入 @rollup/plugin-terser 插件，并将其添加到 plugins 数组中。你可以通过传递选项来配置 Terser 的行为。

3. Terser 插件选项

@rollup/plugin-terser 插件支持 Terser 的所有选项。以下是一些常用的选项：

• compress: 控制代码压缩的选项。例如，drop_console: true 可以移除所有的 console.log 语句。
• mangle: 控制变量名混淆的选项。默认情况下，Terser 会混淆变量名以减小文件大小。
• format: 控制输出代码的格式。例如，beautify: true 可以使输出代码更易读。

4. 示例配置

以下是一个完整的 Rollup 配置文件示例，展示了如何使用 @rollup/plugin-terser 插件来压缩和混淆代码：

// www.javascriptcn.com code example
import { rollup } from 'rollup';
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'iife',
  },
  plugins: [
    terser({
      compress: {
        drop_console: true, // 移除 console.log
      },
      mangle: {
        toplevel: true, // 混淆顶级变量名
      },
      format: {
        comments: false, // 移除注释
      },
    }),
  ],
};

5. 运行 Rollup

配置完成后，运行 Rollup 来生成压缩后的代码：

npx rollup -c

或者

yarn rollup -c

这将生成一个压缩后的 bundle.min.js 文件，位于 dist 目录中。