Babel知识体系浅谈

我我的正在写Node.js的系列学习笔记node-learning-manual，包含了Node.js的基本模块和工程化相关的知识, 若是对你有帮助，请点个start，您的支持是对我最大的鼓励。

前言

前端发展到如今，可谓是混乱至极，已经远远超出我对前端所谓一把jQuery抄起来就是怼，

Webpack, babel, node.js, react, vue各类工程框架，构建工具你不会点好像都不算是个合格的

前端工程师，语法相关的ES6/7老是绕不过Babel，这篇文章就是直接讨论Babel。

本文只要围绕如下几块来讲：

1. Babel编译过程介绍
2. Babel插件及预设
3. Babel-register在项目中的使用
4. babel的polyfill引入机制
5. babel在前端工程的定位

Babel编译过程介绍

1. 核心包

   // 暴露babel.transform方法来编译source code
   babel-core
   // 语法字符串解析parser
   babylon
   // 结合plugins遍历AST语法树
   babel-traverse
   // 生成最后的编译字符串
   babel-generator
   复制代码

2. babel编译流程

   input string
   -> babylon parser
   -> AST
   -> babel-traverse  //使用plugins遍历AST语法树
   -> AST
   -> babel-generator
   -> output string
   复制代码

Babel是一个JavaScrpit的编译器，从宏观的角度来看，它有三个运行阶段：解析，转化，生成。基本上若是不设置配置文件.babelrc，Babel运行的结果即是 const babel = code => code ，经过读取代码，最后生成同样的代码。Babel的最核心的概念即是插件，经过在配置文件 .babelrc中添加不一样的插件基本能够作全部的事情。

Babel插件（plugins）及预设（presets）

首先聊聊插件与预设的关系，官方预设即是由官方评审维护的一系列插件组合。插件与预设的关系即是父子集合的关系。

每一年babel都会评估当年的插件，babel-preset-env 取代了 es2015, es2016, es2017 以及最新的代码

• env
• react
• flow

Babel-register在项目中的使用

babel-register的设计思想很是厉害，简单的来讲就是require hook。也是babel常见的一种使用方法。

这种方法只须要引入文件就能够运行 Babel，或许能更好地融入你的项目设置。

让咱们先在项目中建立index.js文件

// index.js
console.log("hello world");
复制代码

接着须要咱们安装babel-register

$ npm install i -D babel-register
复制代码

接着，在项目中建立 register.js 文件并添加以下代码：

require("babel-register");
require("./index.js");
复制代码

而后咱们只须要启动 node register.js 即可，经过修改require function，对全部的经过require引入的代码先通过babel编译一遍，再给到runtime执行。

babel的polyfill引入机制

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。

为了解决这个问题，咱们使用一种叫作 Polyfill（代码填充，也可译做兼容性补丁） 的技术。 简单地说，polyfill 便是在当前运行环境中用来复制（意指模拟性的复制，而不是拷贝）尚不存在的原生 api 的代码。 能让你提早使用还不可用的 APIs，Array.from 就是一个例子。

要使用 Babel polyfill，首先用 npm 安装它：

$ npm install --save babel-polyfill
复制代码

而后只须要在文件顶部导入 polyfill 就能够了：

import "babel-polyfill";
复制代码

因此个人我的建议是按需引入core-js的模块而不是整个babel-polyfill bundle，来对ES6/7新增的数据对象和方法作polyfill。

babel-runtime引入机制

为了实现 ECMAScript 规范的细节，Babel 会使用“助手”方法来保持生成代码的整洁。

因为这些助手方法可能会特别长而且会被添加到每个文件的顶部，所以你能够把它们统一移动到一个单一的“运行时（runtime）”中去。

经过安装 babel-plugin-transform-runtime 和 babel-runtime 来开始。

$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime
复制代码

而后更新 .babelrc：

{
    "plugins": [
+     "transform-runtime",
      "transform-es2015-classes"
    ]
  }
复制代码

如今，Babel 会把这样的代码：

class Foo {
  method() {}
}
复制代码

编译成：

import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";

let Foo = function () {
  function Foo() {
    _classCallCheck(this, Foo);
  }

  _createClass(Foo, [{
    key: "method",
    value: function method() {}
  }]);

  return Foo;
}();
复制代码

这样就不须要把 _classCallCheck 和 _createClass 这两个助手方法放进每个须要的文件里去了。

babel总结

babel的出现让开发者能够自由的采用ES6/7的语法来编写JS项目，极大的丰富了开发 (browser, node) 层面的JS语言特性。

babel的AST parser、polyfill、 register一块儿完成了babel体系对JS的完备解决方案。

参考资料

babel 知识体系漫游

babel handbook

babel docs

我我的正在写Node.js的系列学习笔记node-learning-manual，包含了Node.js的基本模块和工程化相关的知识, 若是对你有帮助，请点个start，您的支持是对我最大的鼓励。