如何在 Node.js 中設置 Babel

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

什么是Babel？

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

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

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

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

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

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

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

很棒吧？讓我們開始學習吧。

先決條件

本教程假設您具備以下條件：

• Node.js基礎知識
• 安裝在您機器上的節(jié)點
• 您選擇的任何代碼或文本編輯器

入門

讓我們設置一個基本的 Node 應用程序，我們將在本教程中使用它。

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

讓我們?yōu)槲覀兊膽贸绦虺跏蓟?chuàng)建一個 package.json 文件：

npm init

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

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

如何設置和安裝 Babel

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

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

要安裝，我們使用下面的命令來安裝包：

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

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

touch .babelrc

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

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

上面的配置是我用來告訴 Babel 的，是的，我不僅要使用我的導入和導出語句，還要使用類特性以及 ES6 中的 rest 和 spread 運算符。

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

如何設置一個簡單的服務器

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

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;

使用上面的示例代碼，我們的服務器將偵聽端口 4001，然后在我們訪問該端口時向我們發(fā)送“Hello from the server”響應。

Package.json 腳本配置。

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

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

很好 - 所以讓我們用這個命令啟動我們的服務器：

npm start

訪問 localhost:4001 后，您應該會收到此響應

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

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

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 應用程序的最終代碼，以及運行“npm start”啟動服務器時應該得到的代碼。

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

結(jié)論

在本教程中，我們學習了如何使用 Babel 在我們的 Node 應用程序中使用令人敬畏的 ES6 語法。

請注意，您可以在 .babelrc 文件中添加更多配置。它不限于我們在本教程中擁有的內(nèi)容 - 因此可以隨意調(diào)整或更改它。

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