ES6的好基友babel转换工具

看看官网:http://babeljs.io/

Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
return item + 1;
});

ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

babel 6与之前版本的区别:

  • 之前版本只要安装一个babel就可以用了,所以之前的版本包含了一大堆的东西,这也导致了下载一堆不必要的东西。但在babel 6中,将babel拆分成两个包:babel-clibabel-core。如果你想要在CLI(终端或REPL)使用babel就下载babel-cli,如果想要在node中使用就下载babel-core
  • babel 6已结尽可能的模块化了,如果还用babel 6之前的方法转换ES6,它会原样输出,并不会转化,因为需要安装插件。如果你想使用箭头函数,那就得安装箭头函数插件npm install babel-plugin-transform-es2015-arrow-functions。

~~~~

babel #

Babel是一个通用的多用途JavaScript编译器

例如,Babel能够将新的ES6箭头函数语法:

const double = n => n * n;

转译为:

const double = function square(n) {
  return n * n;
};

安装Babel #

Babel的CLI是一种在命令行下使用Babel编译文件的简单方法
全局安装

npm install --global babel-cli

命令行下使用Babel #

这将把编译后的结果直接输出至终端

$ babel es6.js

加上-o参数 可以将结果写入到指定的文件

$ babel es6.js -o es5.js

把一个目录整个编译成一个新的目录

$ babel src -d lib

配置 Babel #

Babel是一个通用编译器,因此默认情况下它反而什么都不做,你必须明确地告诉Babel应该要做什么
在项目根目录下创建.babelrc文件,这是用来让Babel做你要它做的事情的配置文件

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

babel-preset-es2015 #

把ES6编译成 ES5

安装依赖的预设

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

修改.babelrc

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

babel-preset-stage-x ES7提案 #

JavaScript还有一些提案还没有完全确定,分为5个阶段

  1. babel-preset-stage-0
  2. babel-preset-stage-1
  3. babel-preset-stage-2
  4. babel-preset-stage-3

安装依赖模块 #

npm install --save-dev babel-preset-stage-2

配置.babelrc

 "presets": [
+    "stage-2"
 ]

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

babel-polyfill #

执行Babel生成的代码
Babel默认只转换新的JavaScript句法,而不转换新的API

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

为了解决这个问题,我们使用一种叫做Polyfill(兼容性补丁)的技术

$ npm install --save babel-polyfill
$ import "babel-polyfill";

资源链接 #

自从 Babel 由版本5升级到版本6后,在安装和使用方式上与之前大相径庭,于是写了这篇入坑须知,以免被新版本所坑。


坑一:本地安装和全局安装

全局安装只需:

   $ npm install --global babel-cli

这时候我们可以使用 Babel 命令编译文件:

    $ babel index.js --out-file compiled.js
    #或
    $ babel index.js -o compiled.js

编译目录:

    $ babel src -out-dir lib
    #或
    babel src -d lib

但是,官方推荐本地安装,是这么说的:

While you can install Babel CLI globally on your machine, it’s much better to install it locally project by project.

There are two primary reasons for this.

  1. Different projects on the same machine can depend on different versions of Babel allowing you to update one at a time.

  2. It means you do not have an implicit dependency on the environment you are working in. Making your project far more portable and easier to setup.

大致的意思就是:可移植性较好并且没有依赖。

本地安装,记在项目的根目录下:

    $ npm install --save-dev babel-cli

但是在本地就不能用 babel 命令了,我们可以在 package.json 文件中添加点东西:

    {
        "script": {
            "build": "babel src -d lib"
        }
    }

然后,运行 npm run build 即可把 src 目录编译输出到 lib


坑二: 编译插件

上述编译其实并没有进行,而是原样输出。这是因为我们没有安装相应的插件,官方提示我们需要安装 babel-reset-es2015 插件:

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

然后,在根目录创建一个名为 .babelrc 的文件,里面配置如下内容:

    {
        "presets": [
            "es2015"
        ]
    }

同理,可以设置 React 的编译插件:

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

.babelrc 文件里即:

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

坑三: babel-polyfill插件

Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 IteratorGeneratorSetMapsProxyReflectSymbolPromise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。Babel 默认不转码的 API 非常多,详细清单可以查看 definitions.js 文件

为了完整使用 ES6API ,我们只能安装这个插件:

    $ npm install -save-dev babel-polyfill

然后,在需要使用的文件的顶部引入

    import "babel-polyfill"

node.js 中:

    require('babel-polyfill');

webpack.config.js 中:

    module.exports = {
        entry: ['babel-polyfill', './app/js']

        gulp简单提一下,gulp默认不支持es6的,如果要使用es6编写gulpfile,你需要把 gulpfile.js 重命名成 gulpfile.babel.js ,同时在 package.json 里面添加 "gulp-babel": "6.1.2",依赖,gulp就能通过babel编译gulpfile然后执行任务。

        gulp目前的稳定版本是3.9,在4.0出来以后可能就不需要这么麻烦了,可以直接在gulpfile.js里面写es6的语法。

        使用babel+es6可以统一js的开发环境其实是一件很有必要的事情。

        • 其一,可以强迫自己学习新的es6语法,等es6成为主流的时候可以积累足够多的开发经验,而且es6能写出更简洁的代码。

        • 其二,通过babel编译源码,可以把很多运行时才能发现的错误提前到编译期,大大的节省了调试代码的时间。

        • 其三,可以统一js的编码规范,js是一门很灵活的语言,这对新手来说是一个好消息,也是一个坏消息。好消息是你花一个下午简单学一下语法就能说自己学会js开发了,坏消息是你用这种简单的思路写了一年js代码,最终发现你还是停留在新手阶段。

        github上有一个airbnb的js规范, https://github.com/airbnb/javascript

        记得以前也分享过,其实仔细阅读这个规范也是一个学习js的途径,这个规范涉及到js开发的各个方面,阅读完之后最起码你会对js有一个更全面的认识。

        有了代码规范,还缺少一个代码检查的工具,幸运的是你不需要自己动手开发这样的工具,eslint jslint jshint三个工具中你可以随便选择,p2pspider这个项目用的是eslint,配合airbnb的eslint插件,我们就能使用airbnb的代码规范,然后在gulp编译源码之前先使用eslint进行代码检查。

      未经允许不得转载:WEB前端开发 » ES6的好基友babel转换工具

      赞 (0)