babel 依赖构建工具传递环境变量，可通过 babel.config.js 的 api.env() 动态配置插件：开发环境启用调试插件如 @babel/plugin-transform-react-jsx-source，生产环境启用优化插件如 @babel/plugin-transform-react-constant-elements 和 @babel/plugin-transform-runtime，并差异化设置 targets 与 usebuiltins。
Babel 本身不直接区分开发和生产环境，它依赖宿主构建工具（如 Webpack、Vite）或运行时上下文来传递环境变量。但你完全可以在 .babelrc、babel.config.js 或 package.json 中通过条件逻辑实现按环境加载不同插件，核心是利用 process.env.NODE_ENV 或显式传入的 envName。
以下是几种主流且实用的方式：
使用 babel.config.js 动态配置 plugins
这是最推荐的方式，因为 babel.config.js 支持导出函数，能读取环境变量并返回不同配置：
// babel.config.js
module.exports = (api) => {
api.cache(true); // 启用缓存，提升性能
const isDevelopment = api.env('development');
const isProduction = api.env('production');
const plugins = [];
// 开发环境专属插件
if (isDevelopment) {
plugins.push(
'@babel/plugin-transform-react-jsx-source', // 为 React 提供源码定位（便于调试）
'@babel/plugin-syntax-dynamic-import' // 支持 import() 语法（Webpack 需要）
);
}
// 生产环境专属插件
if (isProduction) {
plugins.push(
'@babel/plugin-transform-react-constant-elements', // 提升 React 渲染性能
['@babel/plugin-transform-runtime', {
corejs: 3,
helpers: true,
regenerator: false, // 避免重复注入 regeneratorRuntime
useESModules: true
}]
);
}
return {
presets: [
['@babel/preset-env', {
targets: isDevelopment ? { chrome: '90' } : { chrome: '80', ie: '11' },
useBuiltIns: 'usage',
corejs: 3
}],
'@babel/preset-react'
],
plugins
};
};
✅ 关键点：
api.env()是 Babel 内置方法，会自动匹配NODE_ENV值（如webpack --mode=development会设NODE_ENV=development），也可手动调用api.env('test')。
利用 .babelrc + 环境变量（不推荐，功能受限）
.babelrc 是 JSON 格式，无法写逻辑判断。但可通过 --env-name 参数配合 env 字段实现有限分支：
// .babelrc
{
"presets": ["@babel/preset-env"],
"env": {
"development": {
"plugins": ["@babel/plugin-transform-react-jsx-source"]
},
"production": {
"plugins": ["@babel/plugin-transform-react-constant-elements"]
}
}
}
然后在命令中指定：
# 开发时 babel src --out-dir lib --env-name development # 构建时 NODE_ENV=production babel src --out-dir lib
⚠️ 注意：Webpack 的 babel-loader 默认不自动传 env-name，需在 webpack.config.js 中显式配置：
{
loader: 'babel-loader',
options: {
envName: process.env.NODE_ENV || 'development'
}
}
区分 polyfill 引入方式（开发 vs 生产）
这也是环境差异的关键实践：
-
开发环境：通常用
useBuiltIns: 'usage'，按需引入 polyfill，体积小、调试友好； -
生产环境：仍可用
'usage'，但建议配合corejs: 3和@babel/plugin-transform-runtime避免污染全局（尤其多人协作项目）：
// 生产插件中启用 transform-runtime
['@babel/plugin-transform-runtime', {
corejs: 3,
helpers: true,
regenerator: false,
useESModules: true
}]
而开发环境一般不启用 transform-runtime，因为 helper 函数直接内联更利于断点调试；生产则靠它复用 helper、避免重复代码、防止全局污染。
小结关键做法
- 优先用
babel.config.js函数导出，靠api.env()判断环境； - 开发插件侧重调试支持（如 source 插件、JSX 源码映射）；
- 生产插件侧重优化与隔离（如
transform-runtime、常量提升）； -
targets和useBuiltIns也应随环境调整，避免开发时过度兼容拖慢构建； - Webpack 中确保
mode正确设置，才能联动NODE_ENV。
这样配置后，同一份 Babel 配置就能智能适配不同阶段，既保持简洁，又不失灵活性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
