### @babel/plugin-transform-runtime 的作用及配置方法 #### 1. @babel/plugin-transform-runtime 的作用 `@babel/plugin-transform-runtime` 是一个 Babel 插件，用于在编译过程中将高级语言特性（如箭头函数、类等）转换为兼容性更高的代码，同时避免重复引入辅助函数。它通过引用 `@babel/runtime` 中的模块来实现这一点，从而减少打包后的代码体积[^3]。 该插件的主要功能包括： - **避免重复代码**：将辅助函数（如 `_classCallCheck` 或 `_createClass`）提取到单独的模块中，避免每次使用时都生成内联代码。 - **保持一致性**：确保所有项目中的辅助函数版本一致，避免因多次编译而导致的不一致问题。 - **支持 polyfill**：可以通过配置选项提供对 `core-js` 的支持，以实现对现代 JavaScript 特性的兼容。 #### 2. 配置方法 以下是 `@babel/plugin-transform-runtime` 的典型配置示例： ```javascript { "presets": [ ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }] ], "plugins": [ ["@babel/plugin-transform-runtime", { "corejs": 3, // 指定 core-js 的版本 "helpers": true, // 启用辅助函数 "regenerator": true, // 启用 regenerator 运行时支持（用于 generator 和 async/await） "version": "^7.0.0" // 指定 runtime 的版本 }] ] } ``` 上述配置中，`helpers` 选项启用辅助函数的支持，`regenerator` 则用于支持异步函数和生成器函数[^3]。 --- ### babelHelpers: 'runtime' 的配置 在 Rollup 中，`babelHelpers: 'runtime'` 是一种配置方式，用于指定如何处理 Babel 辅助函数。以下是其详细说明： - **`bundled`**：将所有辅助函数内联到最终的输出代码中，适用于小型项目或单个包。 - **`external`**：将辅助函数作为外部依赖引入，通常会生成一个单独的 `@babel/runtime` 包。 - **`runtime`**：类似于 `external`，但会在代码中插入 `require('@babel/runtime/helpers/...')` 或 `import ... from '@babel/runtime/helpers/...'`[^1]。 以下是一个 Rollup 配置示例： ```javascript // rollup.config.js import babel from 'rollup-plugin-babel'; export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'esm' }, plugins: [ babel({ exclude: 'node_modules/**', babelHelpers: 'runtime' // 使用 runtime 方案 }) ] }; ``` 需要确保安装了 `@babel/runtime` 作为依赖项： ```bash npm install --save @babel/runtime ``` --- ### 解决 Unknown file extension ".json" 错误 在 Rollup 中遇到 `TypeError: Unknown file extension ".json"` 错误时，通常是由于 Rollup 默认不支持直接导入 JSON 文件所致。为了解决这一问题，可以使用 `@rollup/plugin-json` 插件。 以下是完整的 Rollup 配置示例： ```javascript // rollup.config.js import json from '@rollup/plugin-json'; import babel from 'rollup-plugin-babel'; export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'esm' }, plugins: [ json(), // 支持 JSON 文件 babel({ exclude: 'node_modules/**', babelHelpers: 'runtime' }) ] }; ``` 通过上述配置，Rollup 将能够正确解析和打包 JSON 文件[^2]。 --- ### 示例：完整配置文件 以下是一个结合了 JSON 支持、Babel 配置和 `@babel/plugin-transform-runtime` 的完整 Rollup 配置文件示例： ```javascript // rollup.config.js import json from '@rollup/plugin-json'; import babel from 'rollup-plugin-babel'; export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'esm' }, plugins: [ json(), // 支持 JSON 文件 babel({ exclude: 'node_modules/**', presets: [ ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }] ], plugins: [ ['@babel/plugin-transform-runtime', { corejs: 3, helpers: true, regenerator: true }] ], babelHelpers: 'runtime' }) ] }; ``` --- ###