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

推荐答案

// www.javascriptcn.com code example
// rollup.config.js
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  plugins: [
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**',
    }),
  ],
};

本题详细解读

1. 安装依赖

首先，你需要安装 @rollup/plugin-babel 插件以及 Babel 的核心依赖：

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

2. 配置 Babel

在项目根目录下创建一个 .babelrc 文件，配置 Babel 的预设：

{
  "presets": ["@babel/preset-env"]
}

3. 配置 Rollup

在 rollup.config.js 中引入 @rollup/plugin-babel 插件，并将其添加到 plugins 数组中。babelHelpers 选项用于指定 Babel 辅助函数的处理方式，bundled 表示将辅助函数打包到输出文件中。exclude 选项用于排除 node_modules 目录下的文件，避免对第三方库进行不必要的转译。

4. 运行 Rollup

配置完成后，运行 Rollup 进行打包：

npx rollup -c

5. 结果

打包完成后，src/main.js 文件中的 ES6+ 代码将被转译为 ES5 代码，并输出到 dist/bundle.js 文件中。