BabelJS - 命令列介面 (CLI)

Babel 自帶一個內建的命令列介面，可用於編譯程式碼。

建立一個你將要工作的目錄。在這裡，我們建立了一個名為 babelproject 的目錄。讓我們使用 nodejs 來建立專案細節。

我們使用 npm init 建立專案，如下所示：

這是我們建立的專案結構。

現在要使用 Babel，我們需要安裝 Babel cli、Babel 預設和 Babel core，如下所示：

執行以下命令安裝 babel-cli：

npm install --save-dev babel-cli

執行以下命令安裝 babel-preset：

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

執行以下命令安裝 babel-core：

npm install --save-dev babel-core

安裝後，以下是 package.json 中的詳細資訊：

我們已將 babel 外掛安裝到專案本地。這樣做是為了我們可以根據專案需求和不同版本的 babeljs 在專案中以不同的方式使用 babel。Package.json 提供了所用 babeljs 的版本詳細資訊。

為了在我們的專案中使用 babel，我們需要在 package.json 中指定如下內容：

Babel 主要用於編譯 JavaScript 程式碼，這將具有向後相容性。現在，我們將用 ES6 -> ES5 或 ES7 -> ES5 以及 ES7 -> ES6 等編寫程式碼。

為了在執行時向 Babel 提供相同的指令，我們需要在根資料夾中建立一個名為 .babelrc 的檔案。它包含一個包含預設詳細資訊的 json 物件，如下所示：

我們將建立 JavaScript 檔案 index.js 並使用 Babel 將其編譯為 es2015。在此之前，我們需要安裝 es2015 預設，如下所示：

在 index.js 中，我們使用箭頭函式建立了一個函式，這是 es6 中新增的新特性。使用 Babel，我們將程式碼編譯為 es5。

要執行到 es2015，使用以下命令：

npx babel index.js

它顯示如上所示的 es5 中的 index.js 程式碼。

我們可以透過執行如下所示的命令將輸出儲存在檔案中：

npx babel index.js --out-file index_es5.js

這是我們建立的檔案 index_es5.js：

列印頁面