Babel知識點常見彙總

Babel是什麼？

Babel是一個JavaScript編譯器

Babel是一個工具鏈，主要用於將ECMAScript 2015+版本的代碼轉換爲向後兼容的JavaScript語法，可使之運行在當前和舊版本的瀏覽器或其餘環境中。下面列出的是Babel能爲你作的事情：
1.語法轉換。
2.經過Polyfill進行語法特性缺失的填充(@babel/polyfill模塊)
3.源碼轉換。

// Babel 輸入： ES2015 箭頭函數
[1, 2, 3].map((n) => n + 1);
// Babel 輸出： ES5 語法實現的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});
複製代碼

JSX 與 React

Babel 可轉換 JSX 語法

npm install --save-dev @babel/preset-react
複製代碼

類型註釋 (Flow&TypeScript)

Flow preset 和 TypeScript preset

npm install --save-dev @babel/preset-flow
npm install --save-dev @babel/preset-typescript
複製代碼

插件化

Babel 構建在插件之上。使用現有的或者本身編寫的插件能夠組成一個轉換管道。經過使用或建立一個 preset 便可輕鬆使用一組插件。

配置 Babel

Babel 也有配置文件！其餘工具都有相似的配置文件：ESLint (.eslintrc)、Prettier (.prettierrc)。

場景區分使用不一樣的配置文件：

你是否但願以編程的方式建立配置文件？
你是否但願編譯 node_modules 目錄下的模塊？
[babel.config.js](https://www.babeljs.cn/docs/configuration#babelconfigjs) 文件能夠知足。
須要一個簡單的而且只用於單個軟件包的配置
.babelrc 文件適合。
**官方推薦=>[babel.config.js](https://www.babeljs.cn/docs/configuration#babelconfigjs) **
四種配置方式：

babel.config.js

babel.config.js 文檔

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}
複製代碼

.babelrc

.babelrc 文檔

{
  "presets": [...],
  "plugins": [...]
}
複製代碼

package.json

將 .babelrc 中的配置信息做爲 babel 鍵（key）的值添加到 package.json 文件中

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}
複製代碼

.babelrc.js

與 .babelrc 的配置相同

onst presets = [ ... ];
const plugins = [ ... ];

module.exports = { presets, plugins };
複製代碼

插件

Babel 是一個編譯器（輸入源碼 => 輸出編譯後的代碼）。就像其餘編譯器同樣，編譯過程分爲三個階段：解析、轉換和打印輸出。

語法插件

這些插件只容許 Babel 解析（parse） 特定類型的語法（而不是轉換）。

轉換插件會自動啓用語法插件。所以，若是你已經使用了相應的轉換插件，則不須要指定語法插件。 .barlrc

{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}
複製代碼

插件/Preset 路徑

babel 會自動檢查它是否已經被安裝到 node_modules 目錄下

{
  "plugins": ["babel-plugin-myPlugin"]
}
複製代碼

也能夠相對路徑

{
  "plugins": ["./node_modules/asdf/plugin"]
}
複製代碼

插件的短名稱

若是插件名稱的前綴爲 babel-plugin-，可以使用它的短名稱：

{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 兩個插件實際是同一個
  ]
}
//帶有冠名的也是同上
{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // 兩個插件實際是同一個
  ]
}
複製代碼

插件順序

插件在Preset以前。
插件順序從前日後排列。
Preset順序是倒序的（從後往前）。

插件參數

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        //參數在這兒呢。
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}
複製代碼

預設（Presets）

preset 能夠做爲 Babel 插件的組合，甚至能夠做爲能夠共享的 options 配置。

官方 Preset

咱們已經針對經常使用環境編寫了一些 preset：

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

Stage-X （實驗性質的 Presets）

stage-x preset 中的語法轉換會隨着被批准爲 JavaScript 新版本的組成部分而進行相應的改變（例如 ES6/ES2015）。
TC39 將提案分爲如下幾個階段：

• Stage 0 - 設想（Strawman）：只是一個想法，可能有 Babel插件。
• Stage 1 - 建議（Proposal）：這是值得跟進的。
• Stage 2 - 草案（Draft）：初始規範。
• Stage 3 - 候選（Candidate）：完成規範並在瀏覽器上初步實現。
• Stage 4 - 完成（Finished）：將添加到下一個年度版本發佈中。

Preset 的排列順序

Preset 是逆序排列的（從後往前）。