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

推荐答案

-- -------------------- ---- -------
-- ----------------
------ ----- ---- -----------------------

------ ------- -
  ------ --------------
  ------- -
    ----- -----------------
    ------- ------
  --
  -------- -
    -------
      ------------- ----------
      -------- ------------------
    ---
  --
--

本题详细解读

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 文件中。