再看 Babel

前言

目前魯班標配爲 Babel 7+ 版本

官網地址 https://babeljs.io/docs/en/pl...

開發手冊 https://github.com/jamiebuild...

功能

• 語法轉譯
• 轉譯特性到目標環境（@babel/polyfill）
• 源碼轉譯

工做機制

原始代碼 --> [Babel Plugin] --> 轉換後的代碼

能夠簡單的把Babel Preset視爲Babel Plugin的集合

presets

官方提供的 presets

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

簡寫

{
  "presets": [
    "env",
    "@babel/preset-env" // 相等
  ]
}

運行順序

{
  "presets": [
    "a",
    "b",
    "c"
  ]
}

運行順序爲從後向前，如：c, b ,a

options 機制

{
  "presets": [
    ["@babel/preset-env", {
      "loose": true,
      "modules": false
    }]
  ]
}

plugins

運行順序

{
  "plugins": [
    "a",
    "b",
    "c"
  ]
}

plugins 在 presets 以前運行，運行順序爲從前向後：a, b ,c

options 機制

{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}