• 使用Babel将单独的js文件 中的 ES6转码为ES5


     

    如果你并没有接触过ES6,当你看到下面的代码时,肯定是有点懵逼的(这是什么鬼?心中一万头神兽奔腾而过),但是你没看错,这就是ES6。不管你看不看它,它都在这里。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var a = (msg) => () => msg;
     
    var bobo = {
      _name: "BoBo",
      _friends: [],
      printFriends() {
        this._friends.forEach(f =>
          console.log(this._name + " knows " + f));
      }
    };

    实际上,上面的这段代码通过Babel转换后,会变成:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    "use strict";
     
    var a = function a(msg) {
      return function () {
        return msg;
      };
    };
     
    var bobo = {
      _name: "BoBo",
      _friends: [],
      printFriends: function printFriends() {
        var _this = this;
     
        this._friends.forEach(function (f) {
          return console.log(_this._name + " knows " + f);
        });
      }
    };

    好,言归正传,我们尝试下用一些方法来实现上面的转码效果吧。

    1、直接安装Babel法:

    1.1) 首先全局安装Babel。

    1
    2
    3
    4
    5
    $ npm install -g babel-cli
     
    //也可以通过直接将Babel安装到项目中,在项目根目录下执行下面命令,同时它会自动在package.json文件中的devDependencies中加入babel-cli
    //在执行安装到项目中命令之前,要先在项目根目录下新建一个package.json文件。
    $ npm install -g babel-cli --save-dev

    如果将babel直接安装到项目中,它会自动在package.json文件中的devDependencies中加入babel-cli。如下所示:

    1
    2
    3
    4
    5
    6
    //......
    {
      "devDependencies": {
        "babel-cli": "^6.22.2"
      }
    }

    1.2) Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。

    这个文件的完整文件名是 “.babelrc”,注意最前面是有个“.”的。如果老是提示 “必须键入文件名” 的错误,把文件名改成“.babelrc.”,注意是前后都有一个点,这样就可以保存成功了

    1
    2
    3
    4
    {
      "presets": [],
      "plugins": []
    }

    1.3) presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

    点击此处到Babel中文官网presets配置页面:Babel Plugins

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # ES2015转码规则
    $ npm install --save-dev babel-preset-es2015
     
    # react转码规则
    $ npm install --save-dev babel-preset-react
     
    # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
    $ npm install --save-dev babel-preset-stage-0
    $ npm install --save-dev babel-preset-stage-1
    $ npm install --save-dev babel-preset-stage-2
    $ npm install --save-dev babel-preset-stage-3

    1.4) 根据官网的提示,当我们用npm安装好这些插件工具之后,我们需要将这些规则加入到.babelrc中去。如下所示:

    1
    2
    3
    4
    5
    6
    7
    8
    {
        "presets": [
          "es2015",
          "react",
          "stage-2"
        ],
        "plugins": []
      }

    1.5) 转码、转码的规则:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 转码结果输出到标准输出
    $ babel test.js
     
    # 转码结果写入一个文件
    # --out-file 或 -o 参数指定输出文件
    $ babel a.js --out-file b.js
    # 或者
    $ babel a.js -o b.js
     
    # 整个目录转码
    # --out-dir 或 -d 参数指定输出目录
    $ babel src --out-dir lib
    # 或者
    $ babel src -d lib
     
    # -s 参数生成source map文件
    $ babel src -d lib -s

    我这里只是使用了es2015转码规则,测试代码截图如下图

  • 相关阅读:
    Antlr与Regex
    c_str()
    C++ 友元
    C++ 操作符重载
    Remote 'attachhome' failed on nodes:XXX
    RAC安装GI时运行root.sh脚本结果
    clscfg.bin: error while loading shared libraries: libcap.so.1:
    RAC安装重新运行root.sh
    libXext.so.6 libXp.so.6 libXt.so.6 is needed by openmotif21-2.1.30-11.el7.i686
    向数据库中导入AWR数据
  • 原文地址:https://www.cnblogs.com/ertingbo/p/9474197.html
走看看 - 开发者的网上家园