摘要：转码的配置是每位前端童鞋在日常工作中都会遇到的。简单点来说就是在转码过程中，对于一些新语法，都会抽象一个个小的函数，在转码过程中完成替换。以上即是我总结的转码姿势，如果对本篇有疑问或建议，欢迎在这里提出。
Babel 转码的配置是每位前端童鞋在日常工作中都会遇到的。刚开始我也是在网上搜索各种配置方法，升级到 Babel 7 的时候又折腾了一把，所以决定把自己的心得和理解记录下来，希望能帮助到有需要的童鞋。
这里呢不打算去讲每一个详细的配置项，毕竟官方文档是最权威的。这篇主要是说下 Babel 7 转码中会涉及到的几个主要库以及他们之间的关系，还有不同的项目类型怎么选择配置方案和一些技巧。
涉及到的主要库首先呢先介绍一下 Babel 7 转码涉及到的“四大天王”：
@babel/preset-env
@babel/polyfill
@babel/runtime
@babel/plugin-transform-runtime
这四个库有什么作用和联系？相信很多童鞋跟我当初一样总是有点分不清，下面就来逐一简单解释下，当然最详细的内容还是要看官方文档。
@babel/preset-env这个是 Babel 转码的环境预设，会根据你设定的目标环境（例如要支持的浏览器版本范围）来调整语法转换规则和选择环境垫片补丁，相比前任的优点是更智能，打包出来的体积也会更小。
@babel/polyfill这个可以模拟基本完全的 ES6+ 环境（不能低于 Stage 4 的提案）。例如，新的 Class：Promise、Map，静态方法：Array.from，新的原型方法：Array.prototype.includes 等。但要注意的是，使用 polyfill 的话是会污染全局的，因为要提供原型方法的支持。
@babel/runtime注意，这个库在 Babel 7.4.0 后已被弃用，用下面的代替：
import "core-js/stable"; import "regenerator-runtime/runtime";但思想是一样的。
这个库提供了一些转码过程中的一些帮助函数。简单点来说就是在转码过程中，对于一些新语法，都会抽象一个个小的函数，在转码过程中完成替换。比如说我们写了一个 class Circle {...}，转码后就会变成这样：
function _classCallCheck(instance, Constructor) {
//...
}
var Circle = function Circle() {
_classCallCheck(this, Circle);
};
所以在每次转换 class 新语法的时候，都会用 _classCallCheck 这个函数去替换。
@babel/plugin-transform-runtime这个是和上面的 @babel/runtime 配合使用的。延续上面的那个例子，如果你的项目有多个 js 文件里面有 class 需要转码，那每个文件都会有一个重复的 _classCallCheck 函数定义，plugin-transform-runtime 的一个主要作用就是从统一的地方去引用这些帮助函数，消除代码冗余从而减少打包的体积：
var _classCallCheck = require("@babel/runtime/helpers/classCallCheck");
var Circle = function Circle() {
_classCallCheck(this, Circle);
};
除此之外，他还提供了一个沙盒环境。如果我们使用 @babel/polyfill 来支持使用一些 ES6+ 的新特性的话（如：Promise、Map 等），会造成全局污染。通过配置 plugin-transform-runtime 的 corejs 选项可以开启沙盒环境支持，在当前需要转码的文件中多带带引入所需的新功能。
安装说明接下来我们看看上面的四大天王怎么安装：
npm install --save @babel/runtime, @babel/polyfill npm install --save-dev @babel/preset-env, @babel/plugin-transform-runtime
这里也许有童鞋会有跟我当时同样的疑问：@babel/runtime 不是打包转码过程中用的吗，怎么会安装为运行环境依赖呢？——还记得 plugin-transform-runtime 会从统一的地方去引用这些帮助函数吗，这意味着这些代码会在运行时执行，所以当然是运行时依赖啦。
然后这里给大家提供一个小技巧。有时我们会安装配置 @babel/preset-stage-x 去使用一些新的提案，当在 Babel 7 中这些 preset-stage-x 已经被弃用了，我们必须一个个的安装所需的插件，还得去改 .babelrc 的配置，挺烦的，怎么简化呢？我们可以用下面的方法去简化安装，比如 stage-2：
首先：npm install --save-dev @babel/preset-stage-2
然后：npx babel-upgrade --write --install
这样就搞定了。babel-upgrade 这个工具会自动帮你安装所需的插件，并且把 package.json 和 .babelrc 文件相关的地方都改好，非常好用！
不同项目类型的配置建议这里我们主要分为 npm 库项目和业务项目来建议配置，仅供大家参考。当然首先 preset-env 是都要安装的，然后根据你的目标环境做好配置。
npm 库项目这个简单点来说就是你写了一个第三方库来给别人使用的，runtime 和 plugin-transform-runtime 肯定是都要安装上的。特别注意 polyfill 不要安装，我的建议是：由业务项目来负责垫片补丁，因为 polyfill 会污染全局。
业务项目这个就是我们的具体业务项目如网站啦什么的。那么 runtime、plugin-transform-runtime、和 polyfill 都要安装上，并且 @babel/preset-env 要配置上 useBuiltIns: "entry"，这是为了在项目入口文件上根据目标环境来智能选择导入哪些 polyfill 而不是全部导入，这是 preset-env 会帮你做的事情（具体请参考 polyfill 文档），最后别忘记了在入口文件上 import "@babel/polyfill"。
以上即是我总结的 Babel 7 转码姿势，如果对本篇有疑问或建议，欢迎在 这里 提出。
欢迎 star 和关注我的 JS 博客：小声比比 Javascript
参考资料Babel Docs
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109972.html
摘要：在项目根目录下创建一个文件，注意这是个配置文件，以点号开头，没有后缀。提供了一种可以在浏览器中使用的方法，只需两步就能一劳永逸。 1.在命令行中使用 Babel Babel 官方推荐将 Babel 安装在本地，因为 Babel 的不同版本以及不同转码规则会起到不同的效果，全局安装会带来不必要的麻烦。在命令提示符中转到自己的项目目录下： npm install --save-dev ba...
摘要：在做项目中一直使用的是脚手架搭建的环境，一直没有仔细的去了解这一工具，这周末抽出一天时间通过官网还有各种博客文章算是了解了一些内容，起码可以在项目中自己完成的配置了。不过好像目前浏览器端对这种诸如之类的方法支持的还不错了。 在做项目中一直使用的是脚手架搭建的环境，一直没有仔细的去了解 babel 这一工具，这周末抽出一天时间通过官网还有各种博客文章算是了解了一些内容，起码可以在项目中自...
摘要：工程化所谓前段工程自动化就是由于前端分裂，有人写代码，有人写，有人写，有人写，那么就需要翻译工具命令行工具翻译成或其他所有浏览器能运行的代码版本。自动化举个例子使用命令行工具实现代码自动化转变。 工程化 所谓前段工程自动化就是：由于前端分裂，有人写css代码，有人写scss，有人写es5，有人写es6，那么就需要翻译工具（命令行工具）翻译成ie或其他所有浏览器能运行的代码版本。 sho...
摘要：首先安装使用时在文件头加载然后，就不需要手动对转码了。 原文转载自阮一峰教程 本文讲解如何在nodejs环境下使用babel将ES6代码转ES5以及运行ES6的js文件 配置.babelrc文件 首先安装es2015的presets字段 $ npm install --save-dev babel-preset-es2015 然后写入.babelrc { presets:[ ...
阅读 536·2023-04-26 02:58
阅读 2235·2021-09-27 14:01
阅读 3539·2021-09-22 15:57
阅读 1141·2019-08-30 15:56
阅读 1004·2019-08-30 15:53
阅读 743·2019-08-30 15:52
阅读 603·2019-08-26 14:01
阅读 2119·2019-08-26 13:41
