當(dāng)我第一次發(fā)現(xiàn) TypeScript 時(shí)，就把它用到了自己的 JavaScript 程序中。使用 TypeScript 有很多好處，現(xiàn)在你要讓我在用原生 JavaScript 寫任何東西的話，需要給我一個(gè)令人信服的理由。
在本文中，我將向你展示如何設(shè)置一個(gè)簡(jiǎn)單的開發(fā)環(huán)境，以便使用 TypeScript 編寫 Node.js 應(yīng)用程序。
首先在 TypeScript 中可能有一千種或更多種不同的方法去創(chuàng)建 Node.js 程序。我只是想展示自己喜歡的方式。
另外你可以在此處找到我的入門項(xiàng)目：https://github.com/toxsickcoder/node-typescript-starter。里面有一些不會(huì)在本文中討論的額外功能。
Package.json
就像我之前說過的，有很多方法可以做到這一點(diǎn)。我喜歡將 Webpack 用于 TypeScript 項(xiàng)目。但首先要做的是從創(chuàng)建一個(gè) package.json 開始。
你可以用 npm init 命令生成 package.json，也可以復(fù)制粘貼下面的代碼并進(jìn)行更改。
// 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 項(xiàng)目的簡(jiǎn)單 Webpack 配置開始。完成基本設(shè)置后，將添加 TypeScript。
程序
如前所述，我們將從 JavaScript 程序開始，稍后將其轉(zhuǎn)換為 TypeScript。首先創(chuàng)建一個(gè)帶有 main.js 和 information-logger.js 文件的 src/ 目錄，其中包含一些 Node.js 功能：
// src/information-logger.jsconst 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.jsconst informationLogger = require('./information-logger');informationLogger.logApplicationInformation();informationLogger.logSystemInformation();這段腳本會(huì)將一些系統(tǒng)信息輸出到控制臺(tái)。運(yùn)行 node main.js 后，可以看到以下輸出：
{ application: { name: 'node-typescript', version: '0.0.1' } }
{ system: { platform: 'linux', cpus: 8 } }
Webpack
在使用 Webpack 之前，需要做的第一件事就是安裝必要的依賴項(xiàng)。不要忘記使用 -D 標(biāo)志，它代表 devDependencies。
npm i -D webpack webpack-cli
你可能注意到我沒有安裝 webpack-dev-server 。這因?yàn)槲覀冋趧?chuàng)建一個(gè) Node.js 應(yīng)用程序。后面我會(huì)使用 nodemon，它有相同的用途。
webpack.config.js
下一步是創(chuàng)建一個(gè) webpack.config.js 文件，通過它告訴 Webpack 應(yīng)該如何處理我們的代碼。
// 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 開始并不需要太多配置。唯一需要的兩個(gè)選項(xiàng)是 entry 和 target。我們用 entry 字段聲明程序的入口點(diǎn)，告訴 Webpack 在 Node.js 中使用 target 字段。
可以用 mode 字段告訴 Webpack 它應(yīng)該關(guān)注編譯速度（開發(fā)）還是混淆和縮小（生產(chǎn)）。為了幫助調(diào)試，需要在開發(fā)模式中運(yùn)行，用 devtool 字段來指示我們想要源映射。這樣，如果出現(xiàn)錯(cuò)誤，可以很容易地在代碼中找到它出現(xiàn)的位置。
要使用 Webpack，需要?jiǎng)?chuàng)建一些 npm 命令：
// package.json... "scripts": { "start": "webpack --progress --env.development", "start:prod": "webpack --progress" },...現(xiàn)在可以通過運(yùn)行這些命令來構(gòu)建程序。它將創(chuàng)建一個(gè)目錄 dist/，其中包含輸出文件 main.js 。可以用 webpack.config.js 中的 output configuration 指定一個(gè)不同的名稱。
我們的項(xiàng)目現(xiàn)在應(yīng)該是這樣的：
dist/ main.jsnode_modules/src/ information_logger.js main.jspackage-lock.jsonpackage.jsonwebpack.config.js
nodemon
你可能已經(jīng)注意到，在運(yùn)行啟動(dòng)命令后，Webpack 會(huì)在構(gòu)建應(yīng)用程序后停止。它不會(huì)監(jiān)視我們對(duì)的文件所所做的改動(dòng)。由于我們正在使用 Node.js，所以無(wú)法用 webpack-dev-server。
幸運(yùn)的是可以用 nodemon 來解決這個(gè)問題。它是專門為這個(gè)目的而開發(fā)的工具：在開發(fā)期間重新啟動(dòng) Node.js 應(yīng)用程序。
讓我們從安裝 nodemon-webpack-plugin開始。不要忘記 -D 標(biāo)志，因?yàn)樗且粋€(gè) devDependency。
npm i -D nodemon-webpack-plugin
讓我們創(chuàng)建一個(gè)新的 nodemon 標(biāo)志，并將插件添加到的 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;};當(dāng)我們傳遞 nodemon 標(biāo)志時(shí)，需要設(shè)置 Webpack watch config，并添加 nodemon 插件。當(dāng)我們更改文件時(shí)，Webpack watch config 將會(huì)重建程序。 nodemon 插件會(huì)在重建完成后重新啟動(dòng)程序。
我們還需要更新 npm 命令。我還創(chuàng)建了一些沒有 nodemon標(biāo)志的構(gòu)建命令，。
// 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 設(shè)置。下一步是添加 TypeScript！
TypeScript
現(xiàn)在讓我們添加 TypeScript！首先安裝需要的依賴項(xiàng)。
由于這是一個(gè) Node.js 項(xiàng)目，我們還需要安裝相關(guān)的支持。我正在研究 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 文件（默認(rèn)情況下，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
如果現(xiàn)在嘗試運(yùn)行我們的程序，它將會(huì)崩潰。因?yàn)檫€缺少 tsconfig.json 文件。所以先創(chuàng)建一個(gè)。
// 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"]}如上所示，我更喜歡嚴(yán)格的 tsconfig 文件，你可以不必這樣做。我喜歡把自己的目標(biāo)代碼語(yǔ)法版本設(shè)定的很高（ esnext 或 es2018），因?yàn)?Node.js 對(duì)新的 JavaScript 功能支持的非常好。
程序
我們?nèi)匀恍枰獙?JavaScript 文件的擴(kuò)展名從 .js 改為.ts。讓我們這樣做并嘗試運(yùn)行項(xiàng)目。
運(yùn)行項(xiàng)目后，可以立即看到我們?cè)趧?chuàng)建的測(cè)試應(yīng)用程序中犯了“錯(cuò)誤”。我們無(wú)法對(duì) package.json 中的 name 字段進(jìn)行解構(gòu)，因?yàn)樗赡芤呀?jīng)被定義了或者我們覆蓋了它。所以需要做一些改動(dòng)。
// information-logger.tsimport 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.tsimport { InformationLogger } from './information-logger';InformationLogger.logApplicationInformation();InformationLogger.logSystemInformation();如果你遵循了前面所有步驟，那么現(xiàn)在項(xiàng)目結(jié)構(gòu)應(yīng)該是這樣的：
dist/ main.jsnode_modules/src/ information-logger.ts main.tspackage-lock.jsonpackage.jsontsconfig.jsonwebpack.config.js
我們已準(zhǔn)備好用 TypeScript 編寫 Node.js 程序了！
最后的注意事項(xiàng)
我確信在 TypeScript 中有數(shù)千種不同的方法來編寫 Node.js 應(yīng)用程序。我所寫下的絕不是你必須要照樣做的方式，這只是你可以做到的方式中的一種。
剩下來的步驟可能是添加 TSLint 集成，添加 Dockerfile，設(shè)置 CI 管道……一切盡在你的掌握之中。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
