BabelJS - 使用Babel 7進行專案設定

---

---

Babel的最新版本7釋出了對現有軟體包的更改。安裝部分與Babel 6相同。Babel 7中唯一的區別是所有軟體包都需要使用@babel/進行安裝，例如@babel/core，@babel/preset-env，@babel/cli，@babel/polyfill等。

這是一個使用babel 7建立的專案設定。

命令

執行以下命令以啟動專案設定：

npm init

安裝以下軟體包

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

這是建立的package.json檔案：

現在將在根資料夾中建立一個.babelrc檔案：

建立一個資料夾src/並在其中新增檔案main.js，並將您的程式碼寫入轉換為es5。

src/main.js

let add = (a,b) => {
   return a+b;
}

轉換命令

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

main_es5.js

"use strict";

var add = function add(a, b) {
   return a + b;
};

Babel 7的工作原理與Babel 6相同。唯一的區別是使用@babel進行軟體包安裝。

Babel 7中有一些預設已棄用。列表如下：

• ES20xx 預設
• babel-preset-env
• babel-preset-latest
• Babel中的階段預設

此外，軟體包中的年份已刪除 - @babel/plugin-transform-es2015-classes現在為@babel/plugin-transform-classes

我們將再看一個使用typescript並將其使用typescript預設和babel 7轉換為Es2015 JavaScript的示例。

要使用typescript，我們需要安裝typescript軟體包，如下所示：

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

在src/資料夾中建立test.ts檔案，並以typescript形式編寫程式碼：

test.ts

let getName = (person: string) => {
   return "Hello, " + person;
}

getName("Siya");

.babelrc

命令

npx babel src/test.ts --out-file test.js

test.js

"use strict";

var getName = function getName(person) {
   return "Hello, " + person;
};

getName("Siya");