es6学习(ESMAScript2015)

Babel转码器

es6的一个转码器,可以将ES6代码转为ES5代码,从而在现有环境下执行。

  1. 首先项目内安装npm install --save-dev babel-cli babel-preset-env,

  2. 为什么不安装在全局? 答:因为安装在全局就无法支持不同项目使用不同版本的babel

  3. babel-preset-env跟babel-prset-latest的配置是一样的,其实就是在特定平台上执行特定的转码规则,说白了就是按需转码的意思

  4. targets 指定运行环境 targets.node 指定node版本 targets.browsers 指定浏览器版本 modules 指定何种形式的模块,设置为false表示不转码模块

    具体配置书写方式如下

{ "presets": ["env", { "targets": { "chrome": 52, "browsers": ["last 2 versions","safari 7"] } } }], //presets设置转码规则 "plugins": [""] }
  1. babel-core 如果某些代码需要调用babel的api进行转码,就要使用babel-core模块
    var babel = require('babel-core');
    
    // 字符串转码
    babel.transform('code();', options);
    // => { code, map, ast }
    
    // 文件转码(异步)
    babel.transformFile('filename.js', options, function(err, result) {
      result; // => { code, map, ast }
    });
    
    // 文件转码(同步)
    babel.transformFileSync('filename.js', options);
    // => { code, map, ast }
    
    // Babel AST转码
    babel.transformFromAst(ast, code, options);
    // => { code, map, ast }
  1. babel-register模块改写require命令,为它加上一个钩子。此后每当使用require加载.js,.jsx,.es和.es6后缀名文件,就会先用babel进行转码,但是只会对require命令加载的文件转码,而不会对当前文件转码。因为是实时转码,所以只适合在开发环境中用。例如下面只会对index.js进行实时转码
    require("babel-register");
    require("./index.js");
  1. babel只转换新的javascript句法,而不转换新的api,比如Iterator、Generator、Set、Maps、Proxy、Symbol、Promise等全局对象以及一些定义在全局对象上的方法(Object.assign)都不会转码,如果想要转码,必须使用babel-polyfill方法
    import 'babel-polyfill';
    //或者
    require('babel-polyfill');

转载于:https://juejin.im/post/5ac1c2176fb9a028b4113817

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值