babel

作者: 大前端之路 | 来源:发表于2017-05-04 14:00 被阅读0次

    REPL在线编译器

    .babelrc配置文件

    npm install --save-dev babel-preset-latest
    babel-preset-react
    babel-preset-stage-0
    
    {
      "presets": [ "es2015", "stage-0", "react"],//转码规则
      "plugins": ["transform-runtime"],//插件
    }
    

    babel-cli命令行工具

    npm install --global babel-cli
    
    //单个文件转码
    babel example.js -o compiled.js
    //文件夹转码,-s输出soucemap
    babel src -d lib -s
    

    babel-node提供一个支持ES6的REPL环境

    {
      "scripts": {
        "script-name": "babel-node script.js"
      }
    }
    

    上面代码中,使用babel-node替代node,这样script.js本身就不用做任何转码处理。

    babel-register

    babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。

    npm install --save-dev babel-register
    
    require("babel-register");
    require("./index.js");
    

    就不需要手动对index.js转码了。

    需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。

    babel-core项目中调用转码

    http://babeljs.io/docs/usage/options/

    npm install babel-core --save
    
    var es6Code = 'let x = n => n + 1';
    var es5Code = require('babel-core')
      .transform(es6Code, {
        presets: ['latest']
      })
      .code;
    // '"use strict";\n\nvar x = function x(n) {\n  return n + 1;\n};'
    

    babel-polyfill

    Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

    举例来说,ES6在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

    npm install --save babel-polyfill
    require('babel-polyfill');
    

    Babel 默认不转码的 API 非常多,详细清单可以查看babel-plugin-transform-runtime
    模块的definitions.js文件。

    相关文章

      网友评论

          本文标题:babel

          本文链接:https://www.haomeiwen.com/subject/bunrtxtx.html