怎么在Node.js中設置Babel

這篇文章主要介紹“怎么在Node.js中設置Babel”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么在Node.js中設置Babel”文章能幫助大家解決問題。

什么是Babel？

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

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

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

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

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

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

先決條件

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

• Node.js基礎知識

• 安裝在您機器上的節點

• 您選擇的任何代碼或文本編輯器

入門

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

新建一個文件夾。在本教程中，我將調用我的 node-babel。現在將文件夾添加到工作區，并打開您的終端。

讓我們為我們的應用程序初始化并創建一個 package.json 文件：

npm init

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

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

如何設置和安裝 Babel

現在，我們將安裝 Babel 系列的三個包，它們是：

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

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

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

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

touch .babelrc

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

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

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

厲害吧？讓我們繼續。

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

現在打開我們之前創建的“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，然后在我們訪問該端口時向我們發送“Hello from the server”響應。

Package.json 腳本配置。

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

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

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

npm start

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

如何使用 Nodemon 監視和重啟你的服務器

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

npm install --save-dev nodemon

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

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

太棒了，現在這是我們 Node 應用程序的最終代碼，以及運行“npm start”啟動服務器時應該得到的代碼。

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

關于“怎么在Node.js中設置Babel”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。