Babel疾速入门

2024年4月19日 245次阅读 来源: icyfire

起首，作为入门的话，Babel的用户手册是个很不错的挑选，内里基本覆蓋了Babel运用的各方面。所以下面主假如我进修Babel的一些笔记，权且看成是一篇入门吧。

Babel是什么

根据Babel官网的说法，Babel是一个Javascript编译器。它能够把用最新范例编写的Javascript代码编译成如今的浏览器或许node环境下能运转的代码，这个历程叫做“源码到源码”编译，又称转译（transpiling）。经由过程这个体式格局，我们就能够提早运用下一代的范例和特征举行编码，然后在如今的环境下运转。

装置Babel

一般我们运用Babel的babel-cli东西在敕令行下举行文件的编译。我们能够对babel-cli举行全局装置，也能够把它装置到项目里。这里我挑选了把它装置到项目里。如许做的优点是：

  • 差别的项目能够会运用差别版本的Babel，运用全局的话只能运用一致的版本

  • 轻易项目标布置，运用全局装置的话意味着对环境有个隐式的依靠。

除了babel-cli，另有其他运用Babel的体式格局，详细能够看用户手册。

下面我们最先装置babel-cli。起首新建一个事情目次，并建立package.json文件：

$ npm init -y

装置babel-cli：

$ npm install --save-dev babel-cli

装置完我们能够如许运转：

$ ./node_modules/babel-cli/bin/babel.js -V
6.11.4 (babel-core 6.11.4)

然则如许运转很不轻易，我们能够经由过程npm scripts来运转Babel。在package.json文件里，我们增添scripts字段，并增加一个剧本：

{
  "scripts": {
    "build": "babel src -d lib"
  },
  "devDependencies": {
    "babel-cli": "^6.11.4"
  }
}

这里增添了一条名字为build的剧本，敕令的内容是把src里的文件经由过程Babel转译到lib目次里。然后我们能够经由过程以下敕令运转剧本：

$ npm run build

固然，如今运转这个敕令会报错，因为我们并没有src文件夹。下面我们正式进入正题。

Babel的基本运用

转译初探

起首我们建立src目次，然后建立一个js文件index.js：

[1,2,3].map(n => n + 1);

然后运转npm run build敕令，就会看到lib文件夹里多了一个转译后的文件index.js。然则翻开来看会发明这个转译后的文件跟源文件并没有区分。因为Babel须要你经由过程插件（Plugin）或许预设（presets）通知它做什么。比方我们能够经由过程babel-preset-es2015通知Babel把ES2015的文件转译成ES5。这也是Babel最经常使用的一个用法之一。

设置文件

要运用插件或许预设（相当于一组插件），我们须要在Bable的设置文件内里举行设置。有两个体式格局举行设置。

第一个体式格局是经由过程.babelrc文件：

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

第二个体式格局是运用package.json文件：

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [],
    "plugins": []
  }
}

运用预设

上面说过，预设就是一组插件的鸠合，比方预设babel-preset-es2015就是把一堆跟ES2015有关的插件组合起来供应编译ES2015代码为ES5代码的功用。下面我们最先运用babel-preset-es2015预设来把ES2015转译成ES5。

起首我们装置这个预设：

$ npm install --save-dev babel-preset-es2015

然后在设置文件里增加这个预设：

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

末了我们再次运转一次npm run build敕令，再次翻开lib/index.js文件，我们会看到代码已被编译成ES5的语法：

"use strict";

[1, 2, 3].map(function (n) {
  return n + 1;
});

Babel的实行

Polyfill

像上面那段转译后的代码我们能够直接运用在当前的环境下，然则并非一切转译后的文件我们都只能直接运用，因为虽然Babel能够编译现在险些一切的ES2015语法，然则一些新的API能够在当前的Javascript环境下没法支撑。比方下面的代码（假定文件为lib/index.js）：

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

转译后会变成：

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

能够看到语法上已转译成ES5了，然则并非一切的Javascript环境都支撑Array.from，比方我们在IE上运转以下页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="lib/index.js"></script>
        <script>
            console.log(addAll(1, 2, 3, 4, 5));
        </script>
    </body>
</html>

能够会报以下的毛病：

对象不支撑“from”属性或要领

Babel的处理要领就是运用Polyfill手艺（运用了core-js和regenerator），经由过程在当前的运转环境模拟不存在的API来到达运用新API的目标。

起首我们装置babel-polyfill：

$ npm install --save babel-polyfill

注重这里运用的是--save而不是--save-dev，因为我们须要在代码里引入babel-polyfill。我们须要在文件顶部导入它：

import "babel-polyfill";

在增加这句代码后，上面的代码在转译后会变成下面这个模样：

"use strict";

require("babel-polyfill");

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

因为Babel编译时默许运用的是CommonJS的模块范例，所以会看到转译后的代码运用了require要领来加载babel-polyfill。这个在node环境下运转没有题目，然则在浏览器环境下运转就会报错，因为浏览器现在还不原生的支撑模块的加载。那在浏览器下怎样运用babel-polyfill呢？

我们能够把babel-polyfill经由过程外部js的体式格局加载进来，而不是在js代码里举行引入：

<script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
<script src="lib/index.js"></script>

然则假如你打算在项目里运用模块，上面显著不是很好的处理方案。下面我们看看假如处理在浏览器环境下模块的加载题目。

运用模块

要在浏览器环境下加载依靠模块，有许多体式格局，比方运用webpack或许browserify之类的打包东西（发起的体式格局，然则这里我们先不触及）。或许我们能够运用浏览器端的模块加载器举行加载，比方我们运用AMD模块范例举行编译，然后用RequireJS举行加载。下面我运用SystemJS来做例子。

起首我们装置es2015-modules-systemjs插件：

$ npm install babel-plugin-transform-es2015-modules-systemjs

然后修正设置文件，在plugins里增加插件：

{
  "plugins": ["transform-es2015-modules-systemjs"]
}

我们修正下lib/index.js，把addAll要领导出为模块的要领：

import "babel-polyfill";

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

再次对文件举行编译，编译后的lib/index.js变成如许：

"use strict";

System.register(["babel-polyfill"], function (_export, _context) {
  "use strict";

  return {
    setters: [function (_babelPolyfill) {}],
    execute: function () {
      function addAll() {
        return Array.from(arguments).reduce(function (a, b) {
          return a + b;
        });
      }

      _export("addAll", addAll);
    }
  };
});

然后我们须要在HTML里引入system.js。因为SystemJS依靠于Promise，它会加载目次下system-polyfills.js文件，所以我们须要确保这个文件的存在。在加载system.js后，我们就能够运用SystemJS举行模块的加载了：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="system.js"></script>
        <script>
            System.config({
                baseURL: './lib',
                map: {
                    'babel-polyfill': './node_modules/babel-polyfill/dist/polyfill.min.js'
                }
            });

            System.import('index.js').then(function(m) {
                console.log(m.addAll(1, 2, 3, 4, 5)); // 15
            });
        </script>
    </body>
</html>

出于机能的斟酌，也能够用像Bluebird和es6-promise如许的polyfill做替换，在system.js之前加载。

跋文

自此，我们进修到了Babel的一些基本用法，包含装置和运转，以及设置和预设的用法，同时也初探了一些编译后的文件的运转题目。然则要用好Babel，另有许多题目须要继承讨论，期待我的下一篇笔记。

参考

https://babeljs.io/
https://github.com/thejamesky…
https://github.com/systemjs/s…

    原文作者：icyfire
    原文地址: https://segmentfault.com/a/1190000006085436
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞