快捷導(dǎo)航

TypeScript開發(fā)Node.js程序的方法

更新時間：2019年04月30日 09:13:09 作者：瘋狂的技術(shù)宅

這篇文章主要介紹了TypeScript開發(fā)Node.js程序的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

當(dāng)我第一次發(fā)現(xiàn) TypeScript 時，就把它用到了自己的 JavaScript 程序中。使用 TypeScript 有很多好處，現(xiàn)在你要讓我在用原生 JavaScript 寫任何東西的話，需要給我一個令人信服的理由。

在本文中，我將向你展示如何設(shè)置一個簡單的開發(fā)環(huán)境，以便使用 TypeScript 編寫 Node.js 應(yīng)用程序。

首先在 TypeScript 中可能有一千種或更多種不同的方法去創(chuàng)建 Node.js 程序。我只是想展示自己喜歡的方式。

另外你可以在此處找到我的入門項目：https://github.com/toxsickcoder/node-typescript-starter。里面有一些不會在本文中討論的額外功能。

Package.json

就像我之前說過的，有很多方法可以做到這一點。我喜歡將 Webpack 用于 TypeScript 項目。但首先要做的是從創(chuàng)建一個 package.json 開始。

你可以用 npm init 命令生成 package.json，也可以復(fù)制粘貼下面的代碼并進行更改。

// 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 配置開始。完成基本設(shè)置后，將添加 TypeScript。

程序

如前所述，我們將從 JavaScript 程序開始，稍后將其轉(zhuǎn)換為 TypeScript。首先創(chuàng)建一個帶有 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();

這段腳本會將一些系統(tǒng)信息輸出到控制臺。運行 node main.js 后，可以看到以下輸出：

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

Webpack

在使用 Webpack 之前，需要做的第一件事就是安裝必要的依賴項。不要忘記使用 -D 標(biāo)志，它代表 devDependencies。

npm i -D webpack webpack-cli

你可能注意到我沒有安裝 webpack-dev-server 。這因為我們正在創(chuàng)建一個 Node.js 應(yīng)用程序。后面我會使用 nodemon，它有相同的用途。

webpack.config.js

下一步是創(chuàng)建一個 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 開始并不需要太多配置。唯一需要的兩個選項是 entry 和 target。我們用 entry 字段聲明程序的入口點，告訴 Webpack 在 Node.js 中使用 target 字段。

可以用 mode 字段告訴 Webpack 它應(yīng)該關(guān)注編譯速度（開發(fā)）還是混淆和縮小（生產(chǎn)）。為了幫助調(diào)試，需要在開發(fā)模式中運行，用 devtool 字段來指示我們想要源映射。這樣，如果出現(xiàn)錯誤，可以很容易地在代碼中找到它出現(xiàn)的位置。

要使用 Webpack，需要創(chuàng)建一些 npm 命令：

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

現(xiàn)在可以通過運行這些命令來構(gòu)建程序。它將創(chuàng)建一個目錄 dist/，其中包含輸出文件 main.js 。可以用 webpack.config.js 中的 output configuration 指定一個不同的名稱。

我們的項目現(xiàn)在應(yīng)該是這樣的：

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

nodemon

你可能已經(jīng)注意到，在運行啟動命令后，Webpack 會在構(gòu)建應(yīng)用程序后停止。它不會監(jiān)視我們對的文件所所做的改動。由于我們正在使用 Node.js，所以無法用 webpack-dev-server。

幸運的是可以用 nodemon 來解決這個問題。它是專門為這個目的而開發(fā)的工具：在開發(fā)期間重新啟動 Node.js 應(yīng)用程序。

讓我們從安裝 nodemon-webpack-plugin開始。不要忘記 -D 標(biāo)志，因為它是一個 devDependency。

npm i -D nodemon-webpack-plugin

讓我們創(chuàng)建一個新的 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è)置 Webpack watch config，并添加 nodemon 插件。當(dāng)我們更改文件時，Webpack watch config 將會重建程序。 nodemon 插件會在重建完成后重新啟動程序。

我們還需要更新 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！首先安裝需要的依賴項。

由于這是一個 Node.js 項目，我們還需要安裝相關(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)在嘗試運行我們的程序，它將會崩潰。因為還缺少 tsconfig.json 文件。所以先創(chuàng)建一個。

// 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)代碼語法版本設(shè)定的很高（ esnext 或 es2018），因為 Node.js 對新的 JavaScript 功能支持的非常好。

程序

我們?nèi)匀恍枰獙?JavaScript 文件的擴展名從 .js 改為.ts。讓我們這樣做并嘗試運行項目。

運行項目后，可以立即看到我們在創(chuàng)建的測試應(yīng)用程序中犯了“錯誤”。我們無法對 package.json 中的 name 字段進行解構(gòu)，因為它可能已經(jīng)被定義了或者我們覆蓋了它。所以需要做一些改動。

// 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();

如果你遵循了前面所有步驟，那么現(xiàn)在項目結(jié)構(gòu)應(yīng)該是這樣的：

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

我們已準(zhǔn)備好用 TypeScript 編寫 Node.js 程序了！

最后的注意事項

我確信在 TypeScript 中有數(shù)千種不同的方法來編寫 Node.js 應(yīng)用程序。我所寫下的絕不是你必須要照樣做的方式，這只是你可以做到的方式中的一種。

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

TypeScript開發(fā)Node.js程序的方法

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具