前言
babel-preset-env 是 babel 7.x 版本中的一个预设 preset，它可以根据目标环境（浏览器或 Node.js）自动为代码转换添加需要的插件，从而达到根据使用情况进行最小化转换的效果。同时它支持配置浏览器或 Node.js 版本来确定需要转换哪些 ECMAScript 新特性。
然而，从 7.0 版本开始，babel-preset-env 中默认的 es2015、es2016 等 preset 都被移除了，只剩下了 env 和 stage-2 两个 preset。这导致了很多旧项目升级到 7.x 版本后因为 babel-preset-env 不向下兼容而出现问题。本文将详细总结这个问题的产生和解决方式，以及对开发的指导意义。
问题的产生
在 babel 6.x 中，babel-preset-env 包含了很多之前的 preset，例如 es2015、es2016 等，可以直接在 .babelrc 文件中使用。但是在 babel 7.x 中，这些 preset 被移除了，只保留了 env 和 stage-2 两个 preset。同时，.babelrc 文件不能直接以 JSON 格式书写，需要改为 Javascript CommonJS 模块的写法，并通过 module.exports 导出一个对象。
这意味着如果你原先是这样写 .babelrc 文件的：
{
"presets": ["react", "es2015", "stage-0"]
}现在要改为这样：
-- -------------------- ---- -------
-------------- - -
-------- -
----------------------
-
--------------------
-
-------- - -- ------------ ------- -- -- --
------------ --------
------- --
--
--
------------------------
-
--其中，useBuiltIns 和 corejs 选项用于配置 babel-polyfill 的加载方式，从而在支持的浏览器下最小化 polyfill 的代码量。
解决方式
尽管移除旧的 preset 带来了使用上的不便，但 babel-preset-env 本身已经足够强大。在这里我们列举一些解决升级问题的方法：
手动添加旧的 preset
如果你不想在 .babelrc 中直接填写插件，也可以手动在项目中安装 es2015、es2016 等 preset 并添加到 .babelrc 文件中，如下所示：
module.exports = {
presets: ["react", "es2015", "@babel/preset-stage-0"]
}支持框架或库添加 preset
很多框架或库都内部集成了 babel 的配置。例如 Vue 或者 Storybook 等，它们自带了 babel 配置文件，可以在其中添加 preset-env。如果你在使用这些库或框架，就无需自己手动添加。
更新项目代码
最根本的解决方式是更新项目代码，使用新的语言特性和 best practice。这样就能发挥 babel-preset-env 的优势，最小化转换的代码量。
指导意义
babel-preset-env 的版本升级带来了一些使用上的不便，但是这也提醒了我们，代码迭代是不可避免的。我们需要保持学习新技术，尽可能更新代码实现，以及注意开源库和框架的版本迭代。在这个过程中，防止代码冻结，即使遇到困难也不能放弃、停滞不前。
示例代码
npm install --save-dev @babel/core @babel/cli @babel/preset-env
安装完毕后，你可以在 babel.config.js 中添加如下代码：
-- -------------------- ---- -------
-------------- - -
-------- -
-
--------------------
-
-------- -
--------- ------ - ---------- --- -- --- -- -------- - -------- ------
--
------------ -------- -- ---- --------
------- -- -- -- ------- --- --
--
--
--
--接下来我们创建一个 src 目录，并在其中创建一个 index.js 文件，添加如下代码：
const add = (x, y) => x + y; const res = add(1, 2); console.log(res);
最后，在 package.json 文件中添加如下脚本：
{
"scripts": {
"build": "babel src --out-dir dist"
}
}运行 npm run build 即可将 src 目录下的代码转换到 dist 目录中，输出的代码支持 IE8 及以上版本以及最新版的 5 个浏览器。转换后的代码如下：
"use strict";
var add = function add(x, y) {
return x + y;
};
var res = add(1, 2);
console.log(res);结论
babel-preset-env 的版本升级带来了不便，但同时也提醒了我们未来代码迭代所需的学习和注意事项。我们应该保持更新代码和学习新技能的意识，才能更好地适应不断变化的编程世界。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645cd81d968c7c53b0f5acd2