资讯专栏INFORMATION COLUMN

深入了解babel(一)

littleGrow / 485人阅读

摘要:目前罗列的只是的情况。例如,包含了。的执行过程是,首先读取配置中的条件,根据这些条件从模块可得出该条件下的所有浏览器最低版本号列表,而又为的转译插件提供了浏览器的最低版本号列表,两个浏览器版本号列表的查询可得出一个转译插件的集合。

babel的定义

Babel 是 JavaScript 编译器,更确切地说是源码到源码的编译器,通常也叫做“转换编译器(transpiler)”。

babel-core

如果你需要以编程的方式来使用 Babel,可以使用 babel-core 这个包

npm install babel-core
var babel = require("babel-core");

字符串形式的 JavaScript 代码可以直接使用 babel.transform 来编译

babel.transform("code();....", options);
// => { code, map, ast }

如果是文件的话,可以使用异步 api

babel.transformFile("./myCode.js", options, function(err, result) {
  result; // => { code, map, ast }
});

对于上述所有方法,options 指的都是http://babeljs.io/docs/usage/...

在options中可以设置presets和plugins,或者创建.babelrc文件,options默认开启读取babelrc文件的功能。以下是开启自定义预设和插件的例子:

const {transform,generate}=require("babel-core");
const myPlugin=require("./myPlugin");
const mypreset=require("./mypreset");

const code = `d = a + b + c`;

var es5Code = transform(code, {
  plugins: [myPlugin],
  presets: [mypreset]
})
console.log(es5Code.code);
.babelrc

在我们告诉 Babel 该做什么之前,我们需要创建一个配置文件。你需要做的就是在项目的根路径下创建 .babelrc 文件。然后输入以下内容作为开始:

{
  "presets": [],
  "plugins": []
}

由于babelrc的功能默认被开启,可在options中设置{babelrc:false}来显式关闭。

presets

预设,包含一系列插件的集合。目前常用的presets包括es201x,stage-x,env,latest,react,flow。目前罗列的只是babel6的情况。

1. es2015

check-es2015-constants
transform-es2015-arrow-functions
transform-es2015-block-scoped-functions
transform-es2015-block-scoping
transform-es2015-classes
transform-es2015-computed-properties
transform-es2015-destructuring
transform-es2015-duplicate-keys
transform-es2015-for-of
transform-es2015-function-name
transform-es2015-literals
transform-es2015-modules-commonjs
transform-es2015-object-super
transform-es2015-parameters
transform-es2015-shorthand-properties
transform-es2015-spread
transform-es2015-sticky-regex
transform-es2015-template-literals
transform-es2015-typeof-symbol
transform-es2015-unicode-regex
transform-regenerator

2. es2016
transform-exponentiation-operator

3. es2017
syntax-trailing-function-commas
transform-async-to-generator

es201x系列中,只罗列了当年ECMAScript公布的新特性中的语法部分,至于新特性中的API则全部在polyfill中。

babel-preset-stage-x

JavaScript 还有一些提案,正在积极通过 TC39(ECMAScript 标准背后的技术委员会)的流程成为标准的一部分。

这个流程分为 5(0-4)个阶段。 随着提案得到越多的关注就越有可能被标准采纳,于是他们就继续通过各个阶段,最终在阶段 4 被标准正式采纳。

以下是5 个不同阶段的(打包的)预设:

babel-preset-stage-0 仅仅是个想法

babel-preset-stage-1 提议

babel-preset-stage-2 草案

babel-preset-stage-3 候选

babel-preset-stage-4 已完成

以上每种预设都依赖于紧随的后期阶段预设。例如,babel-preset-stage-0 包含了 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3。

stage预设是一个一直变化的插件集合,根据当年发布的标准内容,动态改变stage的插件内容,stage3中的候选插件很可能被完成,那就会在babel新release的版本中去除,而stage2中的草案就会进入到stage3中的候选名单中,像是一个传接棒的过程,当然草案或者候选的名单随时可能会被取消。

其中stage-0的do语法糖可以很好的用在jsx中,我们在开发recatjsx条件判断代码时,可以有以下几种方式:

1.第一种三元表达式

{condition1?condition2?result1:result2:result3}

2.第二种自执行函数

{(()=>{
    if(a){
        return ...;
    }else{
        return ...;
    }
})()}

3.第三种do
{

do{
    if(a){
        "result1"
    }else{
        "result2"
    }
}

}

babel-preset-env
{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

当env的配置只简单配置为{presets:["env"]}时,与babel-preset-latest(官方已不推荐使用)等价,相当于同时集合了三个babel-preset-es201x预设。
env的执行过程是,首先读取browsers配置中的条件,根据这些条件从browserslist模块可得出该条件下的所有浏览器最低版本号列表,而env又为babel的转译插件提供了浏览器的最低版本号列表,两个浏览器版本号列表的查询可得出一个babel转译插件的集合。

browserslist根据条件查出的浏览器及版本号:

1%, Last 2 versions => {ie:10,chrome:56...}

env提供的转译插件对应浏览器版本号列表:

{
  "check-es2015-constants": {
    "chrome": "49",
    "edge": "14",
    "firefox": "51",
    "safari": "10",
    "node": "6",
    "ios": "10",
    "opera": "36",
    "electron": "1"
  },
  "transform-es2015-arrow-functions": {
    "chrome": "47",
    "edge": "13",
    "firefox": "45",
    "safari": "10",
    "node": "6",
    "ios": "10",
    "opera": "34",
    "electron": "0.36"
  }....

最后得出结果

{
plugins:[babel插件1,babel插件2...]
}
babel垫片

Babel 几乎可以编译所有时新的 JavaScript 语法,但对于 APIs 来说却并非如此。

比方说,下列含有箭头函数的需要编译的代码:

function addAll() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

最终会变成这样:

function addAll() {
  return Array.from(arguments).reduce(function(a, b) {
    return a + b;
  });
}

然而,它依然无法随处可用因为不是所有的 JavaScript 环境都支持 Array.from。
babel垫片有三种:

babel-runtime

babel-plugin-transform-runtime

babel-polyfill

babel-runtime和 babel-plugin-transform-runtime的区别是,相当一前者是手动挡而后者是自动挡,每当要转译一个api时都要手动加上require("babel-runtime"),而babel-plugin-transform-runtime会由工具自动添加,主要的功能是为api提供沙箱的垫片方案,不会污染全局的api,因此适合用在第三方的开发产品中。

babel-polyfill则是通过改写全局prototype的方式实现,比较适合多带带运行的项目。开启babel-polyfill的方式,可以直接在代码中require,或者在webpack的entry中添加,也可以在babel的env中设置useBuildins为true来开启。

深入了解babel(二)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89351.html

相关文章

  • 深入了解babel

    摘要:目前罗列的只是的情况。例如,包含了。的执行过程是,首先读取配置中的条件,根据这些条件从模块可得出该条件下的所有浏览器最低版本号列表,而又为的转译插件提供了浏览器的最低版本号列表,两个浏览器版本号列表的查询可得出一个转译插件的集合。 babel的定义 Babel 是 JavaScript 编译器,更确切地说是源码到源码的编译器,通常也叫做转换编译器(transpiler)。 babel-...

    fxp 评论0 收藏0
  • 深入了解babel(二)

    摘要:接着上一篇文章深入了解一的处理步骤的三个主要处理步骤分别是解析,转换,生成。模块是的代码生成器,它读取并将其转换为代码和源码映射抽象语法树抽象语法树在以上三个神器中都出现过,所以对于编译器来说至关重要。 接着上一篇文章《深入了解babel(一)》 Babel 的处理步骤 Babel 的三个主要处理步骤分别是: 解析(parse),转换(transform),生成(generate)。对...

    ChanceWong 评论0 收藏0
  • 深入了解babel(二)

    摘要:接着上一篇文章深入了解一的处理步骤的三个主要处理步骤分别是解析,转换,生成。模块是的代码生成器,它读取并将其转换为代码和源码映射抽象语法树抽象语法树在以上三个神器中都出现过,所以对于编译器来说至关重要。 接着上一篇文章《深入了解babel(一)》 Babel 的处理步骤 Babel 的三个主要处理步骤分别是: 解析(parse),转换(transform),生成(generate)。对...

    mj 评论0 收藏0

发表评论

0条评论

littleGrow

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<