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 編程語言的最新功能。
更準(zhǔn)確的說法是，babel是一個(gè)JavaScript轉(zhuǎn)碼器，他可以將高版本的JavaScript代碼轉(zhuǎn)換為低版本的JavaScript代碼，從而在使用低版本JavaScript代碼的環(huán)境中應(yīng)用高版本的JavaScript功能。
為什么在 Node.js 中使用 Babel？
您是否曾經(jīng)打開過使用 Node.js/Express 構(gòu)建的后端存儲(chǔ)庫——您首先看到的是 ES6 導(dǎo)入和導(dǎo)出語句以及其他一些很酷的 ES6 語法特性？
好吧，Babel 讓這一切成為可能。請(qǐng)記住，Babel 是一種流行的工具，可讓您使用 JavaScript 的最新功能?，F(xiàn)在許多框架都在底層使用 Babel 來編譯它們的代碼。
例如，如果沒有像 Babel 這樣的編譯器的幫助，Node 就不能使用 ES6 導(dǎo)入和導(dǎo)出語句以及 ES6 語法的其他一些很酷的特性。
因此，在本教程中，我將向您展示如何快速設(shè)置您的 Node 應(yīng)用程序以兼容大多數(shù) ES6 語法。
很棒吧？讓我們開始學(xué)習(xí)吧。
先決條件
本教程假設(shè)您具備以下條件：
- Node.js基礎(chǔ)知識(shí)
- 安裝在您機(jī)器上的節(jié)點(diǎn)
- 您選擇的任何代碼或文本編輯器
入門
讓我們?cè)O(shè)置一個(gè)基本的 Node 應(yīng)用程序，我們將在本教程中使用它。
新建一個(gè)文件夾。在本教程中，我將調(diào)用我的 node-babel。現(xiàn)在將文件夾添加到工作區(qū)，并打開您的終端。
讓我們?yōu)槲覀兊膽?yīng)用程序初始化并創(chuàng)建一個(gè) package.json 文件：
npm init此命令將顯示一些我們希望保持原樣的設(shè)置步驟。因此，在整個(gè)設(shè)置過程中按回車鍵或回車鍵都可以正常工作。
現(xiàn)在完成后，創(chuàng)建一個(gè)名為“index.js”的新文件，它將作為我們的入口點(diǎn)。
如何設(shè)置和安裝 Babel
現(xiàn)在，我們將安裝 Babel 系列的三個(gè)包，它們是：
@babel/cli, @babel/core and @babel/preset-env要安裝，我們使用下面的命令來安裝包：
npm install --save-dev @babel/cli @babel/core @babel/preset-env我們想使用--save-dev將它們安裝為模塊開發(fā)的依賴項(xiàng)。所以一旦你完成安裝，創(chuàng)建一個(gè)名為.babelrc的新文件來配置 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"
]
}上面的配置是我用來告訴 Babel 的，是的，我不僅要使用我的導(dǎo)入和導(dǎo)出語句，還要使用類特性以及 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問該端口時(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訪問 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 語法中的 import 和 export 語句以及 es6 提供的其他很棒的功能，例如 Node 應(yīng)用程序中的 rest 和 spread 運(yùn)算符。
結(jié)論
在本教程中，我們學(xué)習(xí)了如何使用 Babel 在我們的 Node 應(yīng)用程序中使用令人敬畏的 ES6 語法。
請(qǐng)注意，您可以在 .babelrc 文件中添加更多配置。它不限于我們?cè)诒窘坛讨袚碛械膬?nèi)容 - 因此可以隨意調(diào)整或更改它。
你可以在這里找到示例代碼：https : //github.com/Veri5ied/node-babel
