es6學習（ESMAScript2015）

可可西里發表於2018-04-03

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');

相關文章