BabelJS - Babel 預設

---

---

Babel 預設是傳遞給 babel-transpiler 的配置細節，告訴它以指定的模式進行轉換。本章將討論一些最流行的預設：

• ES2015
• Env
• React

我們需要使用與我們希望程式碼轉換到的環境相匹配的預設。例如，es2015 預設會將程式碼轉換為 es5。值為 env 的預設也會轉換為 es5。它還具有其他功能，即選項。如果希望該功能在最新版本的瀏覽器中受支援，則 Babel 僅在這些瀏覽器不支援該功能時才會轉換程式碼。使用 react 預設，Babel 會在轉換到 React 時轉換程式碼。

要使用預設，我們需要在專案根資料夾中建立 .babelrc 檔案。為了演示其工作原理，我們將建立一個如下所示的專案設定。

命令

npm init

我們必須安裝所需的 Babel 預設，如下所示，以及 babel cli、babel core 等。

Babel 6 包

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Babel 7 包

npm install @babel/cli @babel/core @babel/preset-env --save-dev

注意 - babel-preset-es2015 從 Babel 7 開始已棄用。

es2015 或 @babel/env

在專案的根目錄中建立 .babelrc 檔案（Babel 6）：

在 .babelrc 中，presets 為 es2015。這表示 Babel 編譯器我們需要將程式碼轉換為 es2015。

對於 Babel 7，我們需要按如下方式使用預設：

{
   "presets":["@babel/env"]
}

以下是安裝後 package.json 的內容：

由於我們已在本地安裝了 Babel，因此我們在 package.json 的 scripts 部分添加了 babel 命令。

讓我們來看一個簡單的示例，檢查使用預設 es2015 進行轉換。

示例

main.js

let arrow = () => {
   return "this is es6 arrow function";
}

轉換為 es5，如下所示。

命令

npx babel main.js --out-file main_es5.js

main_es5.js

"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

Env

使用 Env 預設，您可以指定希望最終程式碼轉換到的環境。

我們將使用上面建立的相同的專案設定，並將預設從 es2015 更改為 env，如下所示。

此外，我們需要安裝 babel-preset-env。我們將執行以下命令來安裝它。

命令

npm install babel-preset-env --save-dev

我們將再次編譯 main.js 並檢視輸出。

main.js

let arrow = () => {
   return "this is es6 arrow function";
}

命令

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

我們看到轉換後的程式碼是 es5。如果我們知道程式碼將要執行的環境，我們可以使用此預設來指定它。例如，如果我們將瀏覽器指定為 Chrome 和 Firefox 的最後 1 個版本，如下所示。

命令

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

現在我們得到了箭頭函式語法，因為它沒有被轉換為 ES5 語法。這是因為我們希望程式碼支援的環境已經支援箭頭函式。

Babel 使用 babel-preset-env 處理根據環境編譯程式碼的問題。我們還可以根據 Node.js 環境來指定編譯目標，如下所示。

程式碼的最終編譯結果如下所示。

命令

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

Babel 根據當前版本的 Node.js 編譯程式碼。

React 預設

當我們使用 Reactjs 時，可以使用 React 預設。我們將使用一個簡單的示例並使用 React 預設來檢視輸出。

要使用此預設，我們需要安裝 babel-preset-react (Babel 6)，如下所示：

npm install --save-dev babel-preset-react

對於 Babel 7，如下所示：

npm install --save-dev @babel/preset-react

對於 Babel 6，.babelrc 的更改如下：

對於 Babel 7

{
   "presets": ["@babel/preset-react"]
}

main.js

<h1>Hello, world!</h1>

命令

npx babel main.js --out-file main_env.js

main_env.js

React.createElement(
   "h1",
   null,
   "Hello, world!"
);

來自 main.js 的程式碼使用 preset:react 轉換為 Reactjs 語法。