用 TypeScript 開發 Node.js 程序

翻譯：瘋狂的技術宅
原文： https://medium.com/@freek_men...

---

本文首發微信公衆號：前端先鋒
歡迎關注，天天都給你推送新鮮的前端技術文章

---

當我第一次發現 TypeScript 時，就把它用到了本身的 JavaScript 程序中。使用 TypeScript 有不少好處，如今你要讓我在用原生 JavaScript 寫任何東西的話，須要給我一個使人信服的理由。

在本文中，我將向你展現如何設置一個簡單的開發環境，以便使用 TypeScript 編寫 Node.js 應用程序。

---

首先在 TypeScript 中可能有一千種或更多種不一樣的方法去建立 Node.js 程序。我只是想展現本身喜歡的方式。

另外你能夠在此處找到個人入門項目：https://github.com/toxsickcod...。裏面有一些不會在本文中討論的額外功能。

Package.json

就像我以前說過的，有不少方法能夠作到這一點。我喜歡將 Webpack 用於 TypeScript 項目。但首先要作的是從建立一個 package.json 開始。

你能夠用 npm init 命令生成 package.json，也能夠複製粘貼下面的代碼並進行更改。

// package.json
{
  "name": "node-typescript",
  "version": "0.0.1",
  "author": "Freek Mencke",
  "homepage": "https://medium.com/@freek_mencke",
  "license": "MIT",
  "scripts": {},
  "dependencies": {},
  "devDependencies": {}
}

讓咱們從 JavaScript Node.js 項目的簡單 Webpack 配置開始。完成基本設置後，將添加 TypeScript。

程序

如前所述，咱們將從 JavaScript 程序開始，稍後將其轉換爲 TypeScript。首先建立一個帶有 main.js 和 information-logger.js 文件的 src/ 目錄，其中包含一些 Node.js 功能：

// src/information-logger.js
const os = require('os');
const { name, version} = require('../package.json');
module.exports = {
  logApplicationInformation: () =>
    console.log({
      application: {
        name,
        version,
      },
    }),
  logSystemInformation: () =>
    console.log({
      system: {
        platform: process.platform,
        cpus: os.cpus().length,
      },
    }),
};
// src/main.js
const informationLogger = require('./information-logger');
informationLogger.logApplicationInformation();
informationLogger.logSystemInformation();

這段腳本會將一些系統信息輸出到控制檯。運行 node main.js 後，能夠看到如下輸出：

{ application: { name: 'node-typescript', version: '0.0.1' } }
{ system: { platform: 'linux', cpus: 8 } }

Webpack

在使用 Webpack 以前，須要作的第一件事就是安裝必要的依賴項。不要忘記使用 -D 標誌，它表明 devDependencies。

npm i -D webpack webpack-cli

你可能注意到我沒有安裝 webpack-dev-server 。這由於咱們正在建立一個 Node.js 應用程序。後面我會使用 nodemon，它有相同的用途。

webpack.config.js

下一步是建立一個 webpack.config.js 文件，經過它告訴 Webpack 應該如何處理咱們的代碼。

// webpack.config.js
'use strict';
module.exports = (env = {}) => {
  const config = {
    entry: ['./src/main.js'],
    mode: env.development ? 'development' : 'production',
    target: 'node',
    devtool: env.development ? 'cheap-eval-source-map' : false,
  };
  return config;
};

如你所見，從 Webpack 開始並不須要太多配置。惟一須要的兩個選項是 entry 和 target。咱們用 entry 字段聲明程序的入口點，告訴 Webpack 在 Node.js 中使用 target 字段。

能夠用 mode 字段告訴 Webpack 它應該關注編譯速度（開發）仍是混淆和縮小（生產）。爲了幫助調試，須要在開發模式中運行，用 devtool 字段來指示咱們想要源映射。這樣，若是出現錯誤，能夠很容易地在代碼中找到它出現的位置。

要使用 Webpack，須要建立一些 npm 命令：

// package.json
...  
  "scripts": {
    "start": "webpack --progress --env.development",
    "start:prod": "webpack --progress"
  },
...

如今能夠經過運行這些命令來構建程序。它將建立一個目錄 dist/，其中包含輸出文件 main.js 。能夠用 webpack.config.js 中的 output configuration 指定一個不一樣的名稱。

咱們的項目如今應該是這樣的：

dist/
  main.js
node_modules/
src/
  information_logger.js
  main.js
package-lock.json
package.json
webpack.config.js

nodemon

你可能已經注意到，在運行啓動命令後，Webpack 會在構建應用程序後中止。它不會監視咱們對的文件所所作的改動。因爲咱們正在使用 Node.js，因此沒法用 webpack-dev-server。

幸運的是能夠用 nodemon 來解決這個問題。它是專門爲這個目的而開發的工具：在開發期間從新啓動 Node.js 應用程序。

讓咱們從安裝 nodemon-webpack-plugin開始。不要忘記 -D 標誌，由於它是一個 devDependency。

npm i -D nodemon-webpack-plugin

讓咱們建立一個新的 nodemon 標誌，並將插件添加到的 webpack.config.js 中。

// webpack.config.js
'use strict';
const NodemonPlugin = require('nodemon-webpack-plugin');
module.exports = (env = {}) => {
  const config = {
    entry: ['./src/main.js'],
    mode: env.development ? 'development' : 'production',
    target: 'node',
    devtool: env.development ? 'cheap-eval-source-map' : false,  
    resolve: { // tells Webpack what files to watch.
      modules: ['node_modules', 'src', 'package.json'],
    },   
    plugins: [] // required for config.plugins.push(...);
  };
  if (env.nodemon) {
    config.watch = true;
    config.plugins.push(new NodemonPlugin());
  }
  return config;
};

當咱們傳遞 nodemon 標誌時，須要設置 Webpack watch config，並添加 nodemon 插件。當咱們更改文件時，Webpack watch config 將會重建程序。 nodemon 插件會在重建完成後從新啓動程序。

咱們還須要更新 npm 命令。我還建立了一些沒有 nodemon標誌的構建命令，。

// package.json
...
  scripts: [
    "start": "webpack --progress --env.development --env.nodemon",
    "start:prod": "webpack --progress --env.nodemon",
    "build": "webpack --progress --env.development",
    "build:prod": "webpack --progress",
    "build:ci": "webpack"
  ],
...

咱們完成了 Node.js 程序的基本 Webpack 設置。下一步是添加 TypeScript！

TypeScript

如今讓咱們添加 TypeScript！首先安裝須要的依賴項。

因爲這是一個 Node.js 項目，咱們還須要安裝相關的支持。我正在研究 Node.js 的 LTS 版本，也就是10 版。這就是我安裝 ^ 10.0.0 版的緣由。

npm i -D typescript ts-loader @types/node@^10.0.0

ts-loader

咱們將用 ts-loader Webpack 插件來編譯 TypeScript。

咱們須要將 entry 文件的後綴更改成 .ts 並告訴 webpack 它還必須解析 .ts 文件（默認狀況下，Webpack僅適用於 .js 文件）。

// webpack.config.js
...
  const config = {
    entry: ['./src/main.ts'],
    mode: env.development ? 'development' : 'production',
    target: 'node',
    devtool: env.development ? 'cheap-eval-source-map' : false,
    resolve: {
      // Tells Webpack what files to watch      
      extensions: ['.ts', '.js'],
      modules: ['node_modules', 'src', 'package.json'],
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
        },
      ],
    },
    plugins: [], // Required for config.plugins.push(...);
  };
...

tsconfig.json

若是如今嘗試運行咱們的程序，它將會崩潰。由於還缺乏 tsconfig.json 文件。因此先建立一個。

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["dom", "es2018"],
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "removeComments": true,    
    "resolveJsonModule": true,
    "strict": true,
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": ["node_modules"],
  "include": ["src/**/*.ts"]
}

如上所示，我更喜歡嚴格的 tsconfig 文件，你能夠沒必要這樣作。我喜歡把本身的目標代碼語法版本設定的很高（ esnext 或 es2018），由於 Node.js 對新的 JavaScript 功能支持的很是好。

程序

咱們仍然須要將 JavaScript 文件的擴展名從 .js 改成.ts。讓咱們這樣作並嘗試運行項目。

運行項目後，能夠當即看到咱們在建立的測試應用程序中犯了「錯誤」。咱們沒法對 package.json 中的 name 字段進行解構，由於它可能已經被定義了或者咱們覆蓋了它。因此須要作一些改動。

// information-logger.ts
import os from 'os';
import { name, version } from '../package.json';
export class InformationLogger {
  static logApplicationInformation(): void {
    console.log({
      application: {
        name,
        version,
      },
    });
  }
  static logSystemInformation(): void {
    console.log({
      system: {
        platform: process.platform,
        cpus: os.cpus().length,
      },
    });
  }
}
// main.ts
import { InformationLogger } from './information-logger';
InformationLogger.logApplicationInformation();
InformationLogger.logSystemInformation();

若是你遵循了前面全部步驟，那麼如今項目結構應該是這樣的：

dist/
  main.js
node_modules/
src/
  information-logger.ts
  main.ts
package-lock.json
package.json
tsconfig.json
webpack.config.js

咱們已準備好用 TypeScript 編寫 Node.js 程序了！

最後的注意事項

我確信在 TypeScript 中有數千種不一樣的方法來編寫 Node.js 應用程序。我所寫下的毫不是你必需要照樣作的方式，這只是你能夠作到的方式中的一種。

剩下來的步驟多是添加 TSLint 集成，添加 Dockerfile，設置 CI 管道……一切盡在你的掌握之中。

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

---

歡迎繼續閱讀本專欄其它高贊文章：

• 12個使人驚歎的CSS實驗項目
• 必需要會的 50 個React 面試題
• 世界頂級公司的前端面試都問些什麼
• 11 個最好的 JavaScript 動態效果庫
• CSS Flexbox 可視化手冊
• 從設計者的角度看 React
• 過節很無聊？仍是用 JavaScript 寫一個腦力小遊戲吧！
• CSS粘性定位是怎樣工做的
• 一步步教你用HTML5 SVG實現動畫效果
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現