安行使Babel将ES6转码为ES5?

一、前言:

当我们还于迷恋于ES5的上,殊不知ES6早就已披露几年了。时代在上扬,WEB前端技术吗在日新月异,是上做来改变了!

ECMAScript
6(ES6)的上进进度很的快,但现代浏览器对ES6新特性支持度无高,所以只要想在浏览器被直接使用ES6的初特点即得拄别的工具来实现。
Babel是一个常见运用的转码器,babel可以用ES6替代码到地更换为ES5代码,所以我们不用等及浏览器的支持即足以于列蒙以ES6的特点。

babel 6与事先版本的界别:
前面版本要安装一个babel就可以据此了,所以之前的本包含了平等特别堆的物,这也促成了下载一堆放不必要之事物。但在babel
6中,将babel拆分成两个包:babel-cli和babel-core。如果你想如果在CLI(终端或REPL)使用babel就下载babel-cli,如果想使当node中运用就下载babel-core。
babel 6已结尽可能的模块化了,如果还用babel
6之前的办法转换ES6,它会相输出,并无见面转化,因为急需设置插件。如果您想用箭头函数,那即便得设置箭头函数插件npm
install babel-plugin-transform-es2015-arrow-functions。
正文中,我们无讨论ES6的语法特性,重点出口的是怎么用ES6代码转码为ES5代码。

 

二、Babel转码:

假设您并从未沾了ES6,当你看到下的代码时,肯定是出接触懵逼的(这是呀鬼?心中一万头神兽奔腾而过),但是你莫看错,这便是ES6。不管而看无扣它,它还在这里。

 var a = (msg) => () => msg;

    var bobo = {
      _name: "BoBo",
      _friends: [],
      printFriends() {
        this._friends.forEach(f =>
          console.log(this._name + " knows " + f));
      }
    };

实质上,上面的即时段代码通过Babel转换后,会化:

 "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。

 $ 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。如下所示:

 //......
    {
      "devDependencies": {
        "babel-cli": "^6.22.2"
      }
    }

1.2)
Babel的安排文件是.babelrc,存放于路之清目录下。使用Babel的首先步,就是安排是文件。

本条文件之一体化文件称是
“.babelrc”,注意最前面是产生个“.”的。由于自身的微机是Windows系统,所以在新建这个文件之当儿老是提示
“必须键入文件称”
的荒唐。后来谷歌了下,发现创建是文件之上,把公文称反成为“.babelrc.”,注意是内外都发生一个触及,这样就可保存成功了

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

1.3) presets字段设定转码规则,官方提供以下的规则集,你得依据需要设置。

点击这里到Babel中文官网presets配置页面:Babel
Plugins

 # 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中失去。如下所示:

 {
        "presets": [
          "es2015",
          "react",
          "stage-2"
        ],
        "plugins": []
      }

1.5) 转码、转码的规则:

 # 转码结果输出到标准输出
    $ 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
2、工具配置法:

实际上,我们可通过前端自动化的居多家伙来兑现ES6的转码配置,比如,常见的grunt、gulp、Webpack和Node等。下面我就是概括的说生我较熟悉的gulp配置法。

点击这里到Babel中文官网Tool配置页面:Babel
Tool

2.1) 首先,我们需要以列蒙装置gulp:

 $ npm install gulp --save-dev

2.2) 然后,我们用在档次遭到安gulp-babel:

 $ npm install --save-dev gulp-babel

当尽了上面的简单只命后,我们见面意识根本目录下之package.json文件内容既于活动修改成:

 {
      "devDependencies": {
        "babel-cli": "^6.22.2",
        "gulp": "^3.9.1",
        "gulp-babel": "^6.1.2"
      }
    }

2.3) 编写gulpfile.js文件,文件内容如下所示:

 var gulp = require("gulp");
    var babel = require("gulp-babel");

    gulp.task("default", function () {
      return gulp.src("src/a.js")
        .pipe(babel())
        .pipe(gulp.dest("lib"));
    });

当我们在脚下种目录下运作如下命令后,会发觉原本于src文件夹着之a.js(按照ES6业内编制的)文件已经被转码成ES5正规的a.js,并雄居了lib文件夹里面。

 $ gulp default

    #或者用下面的命令也行
    $ gulp

 

三、其他:

以上两种方法,在本人本地亲测有效。当然,你可选更多外的工具来拍卖,殊途同归,Anyway,让咱一道来抱ES6咔嚓!

当,你啊得选取在线转码(测试体验用),地址是:http://babeljs.cn/repl/。