babel 實踐

1、@babel/core

var babel = require("@babel/core");
babel.transform(code, options, function(err, result) { result; // => { code, map, ast } });

2、@babel /cli

babel src --out-dir lib

 

 3、presets

preset 執行順序從右向左

**** @babel/preset-env

實現原理：

一、檢測瀏覽器對JS特性的支持程度，好比經過經過  compat-table 這樣的外部數據。

二、將 JS特性 跟 特定的babel插件 創建映射，映射關係能夠參考 這裏。

三、stage-x 的插件不包括在內。

四、根據開發者的配置項，肯定至少須要包含哪些插件。好比聲明瞭須要支持 IE8+、chrome62+，那麼，全部IE8+須要的插件都會被包含進去。

2、配置

若是不寫任何配置項，env 等價於 latest，也等價於 es2015 + es2016 + es2017 三個相加(不包含 stage-x 中的插件)。env 包含的插件列表維護在這裏

babel 默認只轉換 js 語法，而不轉換新的 API，好比 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法(好比 Object.assign)都不會轉碼。

const presets = [
  ['@babel/env', {
    // chrome, opera, edge, firefox, safari, ie, ios, android, node, electron
    // targets 和 browerslist 合併取最低版本
    targets: {
      ie: 8,

      // 是否使用 esmodules
      esmodules: true,
    },

    // 啓用更符合規範的轉換，但速度會更慢，默認爲 `false`，從目前來看，是更嚴格的轉化，包括一些代碼檢查。
    spec: false,

    // 有兩種模式：normal, loose。其中 normal 更接近 es6 loose 更接近 es5
    loose: false,

    // "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | false, defaults to "commonjs"
    modules: false,

    // 打印插件使用狀況
    debug: true,

    // 按需增長移除一些功能
    // include: [],
    // exclude: [],

    // 增長 polyfills
    // 按需使用
    // useBuiltIns: 'usage',
    // 引用一次
    // useBuiltIns: 'entry',
    // 不引用，獨自使用
    // useBuiltIns: false,

    // 強制使用全部的插件
    // forceAllTransforms: false,

    // 配置 browerslist 的位置
    // configPath: ,
    // 配置是否忽略 browerslist 文件
    // ignoreBrowserslistConfig: false,

    // 是否跳過 proposal 的文件
    // shippedProposals: false,
  }]
];

const plugins = [
  [
    // 重用把 babel 注入的幫助代碼， 依賴 @babel/runtime
    "@babel/plugin-transform-runtime",
    {
      // false || 2, 變成全局或者局部
      "corejs": false,
      
      // 生成器運行時的使用，變成全局或者局部
      "regenerator": true,

      // 幫助函數是變成 inline, 仍是  lib
      "helpers": true,

      // helpers 切換成 esm
      "useESModules": true
    }
  ]
];

module.exports = { presets, plugins };

View Code

useBuiltIns:

"usage" | "entry" | false, defaults to false.

 

4、plugins

plugin 執行順序 從左到右

插件在 Presets 前運行

5、@babel/plugin-transform-runtime

默認狀況下babel 會在每一個文件中引入helper ,致使重複引入文件變大，@babel/plugin-transform-runtime，all of the helpers will reference the module @babel/runtime to avoid duplication across your compiled output. The runtime will be compiled into your build.

@babel/runtime vs  @babel/runtime-corejs2.

默認配置：

{ "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": false, "helpers": true, "regenerator": true, "useESModules": false } ] ] }

@babel/runtime 默認 轉化 不轉換新的 API，好比 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象

若是要轉化用 @babel/runtime-corejs2. 同時開啓  { corejs: 2 }

@babel/plugin-transform-runtime 不轉化實例方法

 

5、@balbel/polyfill 

babel 默認只轉換 js 語法，而不轉換新的 API，好比 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法(好比 Object.assign)都不會轉碼。

 

When used alongside @babel/preset-env,

• If useBuiltIns: 'usage' is specified in .babelrc then do not include @babel/polyfill in either webpack.config.js entry array nor source. Note, @babel/polyfill still needs to be installed.

• If useBuiltIns: 'entry' is specified in .babelrc then include @babel/polyfill at the top of the entry point to your application via require or import as discussed above.

• If useBuiltIns key is not specified or it is explicitly set with useBuiltIns: false in your .babelrc, add @babel/polyfill directly to the entry array in your webpack.config.js.