如何在 Node.js 中設(shè)置 Babel

Node.js 是目前最流行的后端技術(shù)之一。它友好、堅(jiān)固且維護(hù)良好，而且不會(huì)很快消失。為了幫助您學(xué)習(xí)如何有效地使用它，在本文中，我們將使用 Node 創(chuàng)建一個(gè)簡(jiǎn)單的服務(wù)器，并在我們的代碼中配置 Babel。但在我們深入研究構(gòu)建我們的服務(wù)器之前，讓我們更多地了解 Babel 是什么。

什么是Babel？

Babel 是一個(gè) JavaScript 編譯器。它是一種流行的工具，可幫助您使用 JavaScript 編程語(yǔ)言的最新功能。

 更準(zhǔn)確的說(shuō)法是，babel是一個(gè)JavaScript轉(zhuǎn)碼器，他可以將高版本的JavaScript代碼轉(zhuǎn)換為低版本的JavaScript代碼，從而在使用低版本JavaScript代碼的環(huán)境中應(yīng)用高版本的JavaScript功能。

為什么在 Node.js 中使用 Babel？

您是否曾經(jīng)打開過(guò)使用 Node.js/Express 構(gòu)建的后端存儲(chǔ)庫(kù)——您首先看到的是 ES6 導(dǎo)入和導(dǎo)出語(yǔ)句以及其他一些很酷的 ES6 語(yǔ)法特性？

好吧，Babel 讓這一切成為可能。請(qǐng)記住，Babel 是一種流行的工具，可讓您使用 JavaScript 的最新功能?，F(xiàn)在許多框架都在底層使用 Babel 來(lái)編譯它們的代碼。

例如，如果沒有像 Babel 這樣的編譯器的幫助，Node 就不能使用 ES6 導(dǎo)入和導(dǎo)出語(yǔ)句以及 ES6 語(yǔ)法的其他一些很酷的特性。

因此，在本教程中，我將向您展示如何快速設(shè)置您的 Node 應(yīng)用程序以兼容大多數(shù) ES6 語(yǔ)法。

很棒吧？讓我們開始學(xué)習(xí)吧。

先決條件

本教程假設(shè)您具備以下條件：

• Node.js基礎(chǔ)知識(shí)
• 安裝在您機(jī)器上的節(jié)點(diǎn)
• 您選擇的任何代碼或文本編輯器

入門

讓我們?cè)O(shè)置一個(gè)基本的 Node 應(yīng)用程序，我們將在本教程中使用它。

新建一個(gè)文件夾。在本教程中，我將調(diào)用我的 node-babel?，F(xiàn)在將文件夾添加到工作區(qū)，并打開您的終端。

讓我們?yōu)槲覀兊膽?yīng)用程序初始化并創(chuàng)建一個(gè) package.json 文件：

npm init

此命令將顯示一些我們希望保持原樣的設(shè)置步驟。因此，在整個(gè)設(shè)置過(guò)程中按回車鍵或回車鍵都可以正常工作。

現(xiàn)在完成后，創(chuàng)建一個(gè)名為“index.js”的新文件，它將作為我們的入口點(diǎn)。

如何設(shè)置和安裝 Babel

現(xiàn)在，我們將安裝 Babel 系列的三個(gè)包，它們是：

@babel/cli, @babel/core and @babel/preset-env

要安裝，我們使用下面的命令來(lái)安裝包：

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

我們想使用--save-dev將它們安裝為模塊開發(fā)的依賴項(xiàng)。所以一旦你完成安裝，創(chuàng)建一個(gè)名為.babelrc的新文件來(lái)配置 babel。

touch .babelrc

這個(gè)文件將包含我們想要添加到 Babel 的所有選項(xiàng)。所以現(xiàn)在，讓我們使用我通常在我的應(yīng)用程序中用于開發(fā)的設(shè)置。您可以復(fù)制它并添加到您的：

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

上面的配置是我用來(lái)告訴 Babel 的，是的，我不僅要使用我的導(dǎo)入和導(dǎo)出語(yǔ)句，還要使用類特性以及 ES6 中的 rest 和 spread 運(yùn)算符。

厲害吧？讓我們繼續(xù)。

如何設(shè)置一個(gè)簡(jiǎn)單的服務(wù)器

現(xiàn)在打開我們之前創(chuàng)建的“index.js”文件，并添加以下代碼以生成一個(gè)簡(jiǎn)單的服務(wù)器：

import http from 'http';

const server = http.createServer((req, res) => {
  res.end('Hello from the server');
}).listen(4001);

console.log('Server is up and running');

export default server;

使用上面的示例代碼，我們的服務(wù)器將偵聽端口 4001，然后在我們?cè)L問(wèn)該端口時(shí)向我們發(fā)送“Hello from the server”響應(yīng)。

Package.json 腳本配置。

我們現(xiàn)在有一個(gè)簡(jiǎn)單的服務(wù)器。要運(yùn)行它，我們必須在使用 Node.js 運(yùn)行之前轉(zhuǎn)譯我們的代碼。為此，請(qǐng)打開“package.json”文件并添加此構(gòu)建和啟動(dòng)腳本：

  "scripts": {
+   "build": "babel index.js -d dist",
    "start": "npm run build && node dist/index.js"
  }

很好 - 所以讓我們用這個(gè)命令啟動(dòng)我們的服務(wù)器：

npm start

訪問(wèn) localhost:4001 后，您應(yīng)該會(huì)收到此響應(yīng)

如何使用 Nodemon 監(jiān)視和重啟你的服務(wù)器

為了防止每次更改應(yīng)用程序時(shí)自己重新啟動(dòng)服務(wù)器，我們需要安裝 nodemon。您可以使用以下命令將 nodemon 安裝到您的應(yīng)用程序，以將其安裝為開發(fā)依賴項(xiàng)：

npm install --save-dev nodemon

然后我們重新配置我們的 package.json 腳本：

  "scripts": {
    "build": "babel index.js -d dist",
    "start": "npm run build && nodemon dist/index.js"
  }

太棒了，現(xiàn)在這是我們 Node 應(yīng)用程序的最終代碼，以及運(yùn)行“npm start”啟動(dòng)服務(wù)器時(shí)應(yīng)該得到的代碼。

從上圖可以看出，我們的服務(wù)器已啟動(dòng)并正在運(yùn)行。您現(xiàn)在可以使用 es6 語(yǔ)法中的 import 和 export 語(yǔ)句以及 es6 提供的其他很棒的功能，例如 Node 應(yīng)用程序中的 rest 和 spread 運(yùn)算符。

結(jié)論

在本教程中，我們學(xué)習(xí)了如何使用 Babel 在我們的 Node 應(yīng)用程序中使用令人敬畏的 ES6 語(yǔ)法。

請(qǐng)注意，您可以在 .babelrc 文件中添加更多配置。它不限于我們?cè)诒窘坛讨袚碛械膬?nèi)容 - 因此可以隨意調(diào)整或更改它。

你可以在這里找到示例代碼：https : //github.com/Veri5ied/node-babel