【譯】在 Node 和 Express 中使用 ES6 （及以上）語法

原文：www.freecodecamp.org/news/how-to…
做者：Jonathan Cunanan
翻譯：前端小白

也許你已經在前端開發中使用過 ES6 語法了，可是當你轉向後端開發，開始使用 Node.js 和 Express 時， 你會發現 ES6（以及上） 語法新特性不能徹底被支持，若是確實是這樣，那這篇文章值得你好好讀一下。你會學習怎麼一步步在開發和生產環境中對相關腳本進行配置，還會學習到一個小技巧，關於怎麼監視 node.js 應用程序中的文件變更並自動重啓服務。

目錄內容

• 預備知識
• 安裝 Express
• 腳本配置
• 小技巧
• TL;DR

預備知識

在開始以前，咱們須要作些準備工做。

1. 確保你的當你安裝了 Node.js 和 npm。能夠經過 Node.js Source 或者 NVM (Node Version Manager) 來安裝，我推薦安裝最新版或者目前穩定版。
2. 接下來，咱們須要安裝 Express Generator cli，它能夠快速幫咱們生成 Express 應用骨架，在命令行工具中輸入：

npm i -g express-generator
複製代碼

3. 瞭解經常使用的終端命令，在本教程中會涉及到大多數命令，因此即便不會也不用擔憂。
4. 安裝好編輯器，打開命令行終端

安裝 Express

咱們使用 Express generator 來建立一個新項目，它會自動幫咱們生成一些代碼。並將其中一些語法轉換爲 ES6 語法，在這個階段咱們就能夠驗證 ES6 語法是否能正常使用。

項目設置

在命令行工具中輸入下面的命令，你能夠自定義你喜歡的項目名 your-project-name，--no-view 指定咱們不須要在項目骨架中使用模板引擎，例如 handlebars，ejs，pug 等。

express your-project-name --no-view
複製代碼

建立項目後，咱們進入項目根目錄。若是你使用的是 Windows Powershell 和 Linux 終端，輸入下面的命令：

cd your-project-name
複製代碼

接下來打開代碼編輯器，我使用的是 VSCode，你可使用任何你喜歡的編輯器

安裝包，移動和刪除部分文件

使用下面的命令爲咱們的項目安裝依賴，並將其中某些文件夾移動位置

npm install
複製代碼

在等待安裝的過程當中，你能夠作以下幾步操做：

• 建立 src/ 目錄
• 將 bin/，app.js 和 routes/ 移動到 src 目錄
• 將 bin 目錄中的 www 文件重命名爲 www.js
• 將 public/ 移動到項目根目錄
• 刪除 routes/users.js，咱們暫時不須要

整個項目結構以下：

由於修改了文件結構，咱們的服務器啓動腳本如今就失效了，待會兒咱們再解決這個問題。

ES6 語法轉換

將 Express 應用生成器生成的代碼轉換爲 ES6 語法的過程有點枯燥，因此我直接將代碼貼在下面，你能夠複製粘貼。

• bin/www.js 文件：

// bin/www.js
複製代碼

/** * Module dependencies. */
複製代碼

import app from '../app';
import debugLib from 'debug';
import http from 'http';
複製代碼

const debug = debugLib('your-project-name:server');
複製代碼

// generated code below.
複製代碼

咱們幾乎只須要在文件的頂部和底部進行修改，其餘的代碼不須要。

• routes/index.js 文件：

// routes/index.js
複製代碼

import express from 'express';
var router = express.Router();
複製代碼

/* GET home page. */
router.get('/', function(req, res, next) {  
    res.render('index', { title: 'Express' });
});
複製代碼

export default router;
複製代碼

• app.js 文件：

// app.js
複製代碼

import express from 'express';
import path from 'path';
import cookieParser from 'cookie-parser';
import logger from 'morgan';
複製代碼

import indexRouter from './routes/index';
複製代碼

const app = express();
複製代碼

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '../public')));
複製代碼

app.use('/', indexRouter);
複製代碼

export default app;
複製代碼

由於 public/ 被移動到了項目根目錄，因此咱們須要在 app.js 中修改 Express 靜態資源路徑，注意，在這裏咱們將 'public' 改成 '../public'。

app.use(express.static(path.join(__dirname, '../public')));
複製代碼

其次，咱們刪除了 routes/users.js 文件，因此還須要在 app.js中移除如下代碼

// remove these lines
複製代碼

var usersRouter = require('./routes/users');
app.use('/users', usersRouter);
複製代碼

如今代碼語法轉換已經完成了，咱們接下來開始配置腳本。

腳本配置

在這個階段，咱們會一步步來配置，開發環境的生產環境的配置有點區別。咱們會組合部門腳本方便重用。

安裝 npm-run-all

因爲某些終端命令不能在 Windows cmd 上運行，咱們須要安裝 npm-run-all 包，這樣咱們的腳本就能夠在任何環境下運行。 在終端中輸入如下命令：

npm install --save npm-run-all
複製代碼

安裝 babel 和其餘包

Babel 是一個 Javascript 編譯器，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便可以運行在當前和舊版本的瀏覽器或其餘環境中，好比 Node.js。在項目根目錄打開終端命令行，輸入下面命令，咱們會安裝最新版的 babel(Babel 7))

npm install -D @babel/core @babel/cli @babel/preset-env @babel/node
複製代碼

也許你已經注意到了，在上面的那些命令中，我有時候使用 -D，有時使用 --save，這兩種標誌是在告訴 npm 咱們的包是是做爲 devDependency 仍是 dependency，即開發依賴和生產依賴。當安裝完成後，咱們就能夠添加 dev 腳本了。

添加 dev 腳本

我前面說過，package.json 中的腳本命令如今沒法運行，由於咱們修改了部分文件。如今它也運行不了，由於咱們使用了 ES6 import 語法。這時候咱們須要利用以前安裝的包，babel 配置文件，和 babel-node 來讓 node server 運行起來。

在項目根目錄建立 .babelrc 文件，寫入如下代碼：

{ "presets": ["@babel/preset-env"] }
複製代碼

由於咱們使用 Babel 來轉換不一樣類型的 js 語法，因此須要在 .babelrc 中配置 preset-env 預設（以前安裝的），它會告訴 Babel 去轉換哪一種類型。

在這些都設置好後，咱們就能夠測試 node server可否在 ES6 語法環境下運行，首先，在 package.json 中添加 dev 腳本：

"scripts": { 
    "start": "node ./bin/www",    
    "server": "babel-node ./src/bin/www",    
    "dev": "NODE_ENV=development npm-run-all server"
}
複製代碼

在上面的代碼中咱們添加了 server 和 dev 兩個腳本，使用代碼分隔將他們組合起來，再經過 npm-run-all 來運行全部命令。

如今輸入如下命令來測試服務器可否正常啓動：

npm run dev
複製代碼

能夠正常工做！

目前，start 腳本命令還不能運行，咱們會在後面添加 prod 腳本時來修復。

添加 prod 腳本

prod 腳本 和 dev 腳本有點區別，咱們須要將 src 目錄中的全部 js 文件代碼轉換爲 nodejs 可以識別的語法形式。運行 prod 腳本會生成一個和 src/ 目錄結構相似的 dist/ 文件夾，可是每次在運行該腳本以前，咱們須要將舊的 dist/ 文件夾刪除，確保咱們運行的是最新生成的代碼。下面是具體步驟：

• 建立 build 腳本，它會轉換 src/ 中的文件代碼並生成新的 dist/ 文件夾。
• 安裝 rimraf 包，並新建 clean 腳本，用來刪除 dist/ 文件夾。
• 新建 prod 腳本，將 clean，build，start server 腳本組合起來。

Clean 腳本

在建立 build 腳本以前，咱們先要安裝 rimraf 包，用來刪除某個文件夾

npm install rimraf --save
複製代碼

安裝好後，在 package.json 的 scripts 字段中加入 clean 腳本，咱們會在 build 腳本中使用到它，如今整個 scripts 字段結構以下：

"scripts": { 
    "start": "node ./bin/www", 
    "server": "babel-node ./src/bin/www", 
    "dev": "NODE_ENV=development npm-run-all server",  
    "clean": "rimraf dist"
},
複製代碼

Build 腳本

如今咱們來添加 build 腳本，會用到 babel-cli（以前安裝過的），以下：

"scripts": {   
    "start": "node ./bin/www",
    "server": "babel-node ./src/bin/www", 
    "dev": "NODE_ENV=development npm-run-all server",  
    "clean": "rimraf dist",  
    "build": "babel ./src --out-dir dist"  
},
複製代碼

Prod 腳本

prod 腳本組合了 build，clean，和 start 腳本，如今咱們來修改下 start 腳本：

"scripts": {   
    "start": "npm run prod", 
    "server": "babel-node ./src/bin/www", 
    "server:prod": "node ./dist/bin/www", 
    "dev": "NODE_ENV=development npm-run-all server", 
    "clean": "rimraf dist", 
    "build": "babel ./src --out-dir dist",   
    "prod": "NODE_ENV=production npm-run-all clean build server:prod"
},
複製代碼

注意咱們在 scripts 字段中還添加了一個 server:prod 腳本，它的做用是在生成的 dist/ 文件夾中運行 node server。咱們還將 start 腳本指向了 prod 腳本，由於託管平臺(如 Heroku 或 AWS)通常都是使用 npm start 命令來啓動服務。

到目前爲止，咱們的全部配置完成了，如今就能夠在 Node 中使用最新的 js 語法。

小技巧：監視文件變化並自動重啓服務

使用 nodemon 咱們能夠在 nodejs 上自動重啓服務。一樣先安裝 nodemon 包，並新建配置文件 nodemon.json，在項目根目錄下的終端中運行此命令：

npm i -D nodemon
複製代碼

nodemon.json 配置文件：

{ 
    "exec": "npm run dev", 
    "watch": ["src/*", "public/*"], 
    "ext": "js, html, css, json"
}
複製代碼

如今，只要 src/ 和 public/ 文件夾中的文件有變化，服務器就會自動重啓。

咱們將其添加到 package.json 的 scripts 字段中：

"scripts": {  
    "start": "npm run prod",   
    "server": "babel-node ./src/bin/www",  
    "server:prod": "node ./dist/bin/www",   
    "dev": "NODE_ENV=development npm-run-all server", 
    "clean": "rimraf dist",   
    "build": "babel ./src --out-dir dist",  
    "prod": "NODE_ENV=production npm-run-all clean build server:prod",  
    "watch": "nodemon" 
},
複製代碼

運行 watch 腳本：

npm run watch
複製代碼

TL;DR

我將整個教程簡化爲如下幾個步驟，並附上倉庫地址，你能夠參考學習：

• 在命令行終端中使用 express your-project-name 新建項目。
• 新建 src/ 目錄，將 bin/，routes/ 和 app 移動到該目錄；將部分代碼轉換爲 ES6 語法；重命名 bin/www 爲 www.js。
• 安裝開發依賴和生產依賴

npm i -D @babel/cli @babel/core @babel/node @babel/preset-env nodemon
複製代碼

npm i --save rimraf npm-run-all
複製代碼

• package.json 中添加腳本

"scripts": {   
    "start": "npm run prod", 
    "server": "babel-node ./src/bin/www",  
    "server:prod": "node ./dist/bin/www",   
    "dev": "NODE_ENV=development npm-run-all server", 
    "clean": "rimraf dist",  
    "build": "babel ./src --out-dir dist", 
    "prod": "NODE_ENV=production npm-run-all clean build server:prod", 
    "watch": "nodemon" 
},
複製代碼

• 新建 nodemon.json 和 .babelrc，並配置

// nodemon.json

{  
    "exec": "npm run dev", 
    "watch": ["src/*", "public/*"], 
    "ext": "js, html, css, json"
}
複製代碼

// .babelrc

{  
"presets": ["@babel/preset-env"]
}
複製代碼

• 運行 npm run dev，npm run prod，npm run watch 測試腳本
• 完整的倉庫代碼

總結

最後，但願你在本教程中能學到東西，感謝你的閱讀!

happy coding!