翻譯：瘋狂的技術宅 原文：medium.com/@freek_menc…
當我第一次發現 TypeScript 時，就把它用到了自己的 JavaScript 程式中。使用 TypeScript 有很多好處，現在你要讓我在用原生 JavaScript 寫任何東西的話，需要給我一個令人信服的理由。
在本文中，我將向你展示如何設定一個簡單的開發環境，以便使用 TypeScript 編寫 Node.js 應用程式。
首先在 TypeScript 中可能有一千種或更多種不同的方法去建立 Node.js 程式。我只是想展示自己喜歡的方式。
另外你可以在此處找到我的入門專案：github.com/toxsickcode…。裡面有一些不會在本文中討論的額外功能。
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 管道……一切盡在你的掌握之中。
歡迎關注前端公眾號：前端先鋒，獲取更多前端乾貨。
