Babel 7 转码的正确姿势

更新日期: 2019-07-17阅读: 1.8k标签: babel

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 7.4.0 后已被弃用,用下面的代替:

import 'core-js/stable';
import 'regenerator-runtime/runtime';

但思想是一样的。


@babel/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:

  1. 首先:npm install --save-dev @babel/preset-stage-2
  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 转码姿势,如果对本篇有疑问或建议,欢迎在 这里 提出。

原文:https://github.com/deepfunc/js-bullshit-blog/blob/master/其他/其他-Babel7转码的正确姿势.md


链接: https://www.fly63.com/article/detial/4770

Babel中的stage-0,stage-1,stage-2以及stage-3的作用(转)

大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具。大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码

深入理解Babel原理及其使用,babel把ES6转成ES5的原理是什么?

文的babel使用场景局限于babel配合webpack来转译输出es5的js代码,babel的命令行、以代码形式调用或node环境下这些统统都不会涉及。Babel使用的难点主要在于理解polyfill、runtime和core-js。

ES6之Babel的各种坑总结【转载】

自从 Babel 由版本5升级到版本6后,在安装和使用方式上与之前大相径庭,于是写了这篇入坑须知,以免被新版本所坑。坑一本地安装和全局安装 、坑二编译插件、坑三babel-polyfill插件

babel-preset-env:一个帮你配置babel的preset

babel-preset-env 一个帮你配置babel的preset,根据配置的目标环境自动采用需要的babel插件。babel-preset-env 功能类似 babel-preset-latest,优点是它会根据目标环境选择不支持的新特性来转译

babel-polyfill使用与性能优化

本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方法,浏览器本身不支持,此时需要引入babel-polyfill来模拟实现这些对象、方法。

babel的初步了解

由于现在前端出现了很多非es5的语法,如jsx,.vue,ts等等的格式和写法。babel其实是一个解释器,它主要讲进行中的代码分为三个阶段执行:解释,转换,生成。

深入类和继承内部原理+Babel和 TypeScript 之间转换

在 JavaScript 中,没有基本类型,创建的所有东西都是对象。例如,创建一个新字符串,与其他语言不同,在 JavaScript 中,字符串或数字的声明会自动创建一个封装值的对象,并提供不同的方法,甚至可以在基本类型上执行这些方法。

使用 Webpack 与 Babel 配置 ES6 开发环境

在项目根目录下新建一个配置文件—— webpack.config.js 文件:执行编译打包命令,完成后打开 bundle.js 文件发现 isNull 和 unique 两个函数没有被编译,和 webpack 官方说法一致:webpack 默认支持 ES6 模块语法,要编译 ES6 代码依然需要 babel 编译器。

Babel_如何写一个Babel插件

Babel对代码进行转换,会将JS代码转换为AST抽象语法树(解析),对树进行静态分析(转换),然后再将语法树转换为JS代码(生成)。每一层树被称为节点。每一层节点都会有type属性,用来描述节点的类型。其他属性用来进一步描述节点的类型。

初学 Babel 工作原理

Babel 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的。我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说,可能和它们还不够熟悉,我们得让浏览器理解它们,这就需要 Babel

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!