zoukankan      html  css  js  c++  java
  • babel无法编译?

    ECMAScript 6(ES6)的发展或者说普及之快可以说是难以想象的,对很多人来说ECMAScript 5(ES5)都还普及呢。现代浏览器对ES6新特新或多或少的有些支持,但支持度不高,所以要想在浏览器中直接使用ES6的新特性,还得等上一段时间。

    ES6的普及起到至关重要的就不得不说babel了。babel可以将ES6代码完美地转换为ES5代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

    对于刚开始使用babel的人,可能会碰到一些问题,因为网上对于babel的使用教程基本上是针对babel 6之前的版本,而babel 6对于之前版本有一些变化。

    • 因为之前版本只要安装一个babel就可以用了,所以之前的版本包含了一大堆的东西,这也导致了下载一堆不必要的东西。所以babel 6拆分成两个包: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:

    npm install -g babel

    命令行转化js文件:

    babel es6.js

    提示:

    The CLI has been moved into the package `babel-cli`.
    npm install -g babel-cli    

    安装babel-cli

    npm install -g babel-cli

    再次转化:

    babel es6.js

    命令行输出:

    [1, 2, 3].map(x => x * x)

    可以看到并没有像期望的那样转化为ES5,因为没有安装插件。上面使用了箭头函数,所以要安装箭头函数插件。但是这样太麻烦,如果使用了ES6的其他特性,还要安装其他插件,可以只下载一个插件:

    npm install babel-preset-es2015

    这个插件包含了其他插件。

    安装完插件后,运行:

    babel es6.js --presets es2015

    输出:

    [1, 2, 3].map(function (x) {
        return x * x;
    })

    上面已经得到想要的结果了。

    babel可以将ES6文件转换输出到另一个文件:

    babel es6.js -o es5.js
    # 或者
    babel es6.js --out-file es5.js

    也可以用于转换整个目录:

    babel -d lib/ src/

    运行babel-node命令可以直接在命令行运行ES6代码:

    babel-node
    
    > console.log([1,2,3].map(x => x * x))
    [ 1, 4, 9 ]

    也可以直接运行ES6文件。

    babel es6.js
    
    > [1, 2, 3].map(function (x) {
        return x * x;
    })

    (完)

  • 相关阅读:
    Python socket 基础(Server)
    Python socket 基础(Client)
    DOM
    Software Testing Concepts
    coroutine
    这一周~&&html+css的学习感悟
    充实的几天~
    时间不够用的感觉
    论文真痛苦
    焦躁的一周……
  • 原文地址:https://www.cnblogs.com/douglasvegas/p/5427080.html
Copyright © 2011-2022 走看看