搭建 Typescript + Nodejs 的命令行開發環境

本文記錄了搭建基於 TypeScript 的 Nodejs 命令行開發環境的全過程。

爲什麼使用TypeScript

首先，對於編寫類庫或者工具而言，使用 TypeScript 的最大好處就是其提供了類型機制，能夠避免咱們犯一些低級錯誤。

其次，配合編輯器(如 VS Code)，TypeScript 能提供強大的代碼提示功能，咱們不須要記憶不少API的具體使用，在編寫代碼時編輯器會自動進行提示。好比引入了 http 以後，輸入 http. 就會提示可使用的各個方法和屬性，並給出詳細的說明。

同是微軟旗下，VS Code 具備很是強大便利的功能，強烈推薦使用 VS Code 進行 TypeScript 和 Nodejs 開發。

最後，使用 TypeScript 是大勢所趨，不少大公司都在推 TypeScript，使用 TypeScript 開發，可讓咱們對 TS 使用更加熟練。

初始化工程

創建命令行工具，須要先建立一個 npm 包。下文將使用 npm 工具來完成包的初始化和依賴的安裝。

首先建立一個文件夾，而後運行初始化命令：

mkdir ts-node-demo && cd ts-node-demo
npm init
複製代碼

控制檯會出現一系列提示, 按照需求輸入便可，而後一路回車，完成以後輸入 yes 。

package name: (typescript-cli) 
version: (1.0.0) 
description: a cli in typescript
entry point: (index.js) 
test command: 
git repository: 
keywords: CLI,TypeScript
author: YourName
license: (ISC) MIT
複製代碼

初始化以後本地文件夾會出現一個 package.json 文件。咱們的 npm 包就已經初始化完成了。爲了不誤發佈，咱們在 package.json 中作一個更改:

- private: false,
+ private: true,
複製代碼

初始化 Git

在當前目錄下運行：

git init
複製代碼

而後在當前目錄建立 .gitignore 文件,指定忽略 node_modules 文件夾：

node_modules/
lib/
複製代碼

引入 Node 類型

既然是開發 Nodejs 程序，爲了得到合適的類型校驗和代碼提示，咱們須要引入 Nodejs 的類型文件：

npm i -D @types/node
複製代碼

引入 typescript

npm i typescript
複製代碼

而後須要初始化 tsconfig 文件。

./node_modules/.bin/tsc --init
複製代碼

上述命令會在當前文件夾下面建立一個 tsconfig 文件，用來指導 TypeScript 進行編譯。 在裏面有很是多的配置項，而且有很是詳細的解釋，咱們作兩個更改來適配咱們的項目：

+ "sourceMap": true,
+ "outDir": "lib",
複製代碼

上述配置指定生成 sourceMap 文件，並將 TypeScript 的編譯結果輸出到 ./lib 文件夾.

而後在與 compilerOptions 平級的地方增長選項：

"compilerOptions": {
    ...
},
+ "include": [
+ "src/**/*"
+ ]
複製代碼

這表示咱們只會編譯 src 目錄下的 .ts 文件。

編寫代碼

在當前目錄下建立 src 文件夾，並建立 index.ts：

mkdir src && echo "console.log('Your cli is running.');" > src/index.ts
複製代碼

而後運行：

./node_modules/.bin/tsc 
複製代碼

能夠發如今文件夾下出現了 lib/ 目錄，裏面就是 index.ts 編譯以後的 js 文件。

建立運行腳本

每次編譯都須要引用 node_modules 裏面的 tsc 命令，有些繁瑣，有三種方法能夠解決：

1. 全局安裝 typescript 包：

npm i typescript -g
複製代碼

就能夠直接使用 tsc 命令了。

2. 使用 npx 執行

npx 是 npm 提供的命令，其會自動下載對應的包並執行.

npx tsc
複製代碼

3. 建立 npm 腳本

在 package.json 中的 script 中增長一行腳本：

"script": {
+ "build": "tsc"
}
複製代碼

這裏咱們採用第3種方法，寫入腳本後能夠執行：

npm run build
複製代碼

也會成功進行編譯。

註冊命令

開發 Nodejs 命令行工具，就是提供一個能夠直接調用的命令，而不是使用下面這種方式執行文件：

node lib/index.js
複製代碼

咱們想要的效果是執行一個命令就能調用咱們的 js 文件。

首先在當前文件夾建立文件 bin/node-cli-demo :

mkdir bin && touch bin/node-cli-demo.js
複製代碼

而後在文件中寫入如下內容：

#!/usr/bin/env node
require('../lib/index.js');
複製代碼

npm 包註冊的命令須要在 package.json 中進行聲明，增長以下內容：

{
    "name": "typescript-cli",
    "version": "0.0.1",
+ "bin": {
+ "node-cli-demo": "./bin/node-cli-demo.js"
+ },
}
複製代碼

這表示當執行 node-cli-demo 這個命令時就去執行咱們的 ./bin/node-cli-demo.js 文件。

最後在當前目錄調用 npm link ，這條命令會把咱們本地註冊的命令放到 Nodejs 安裝目錄的 bin 文件夾下。在安裝 Nodejs 時系統將該文件夾添加到命令查找的路徑中。因此咱們就能夠直接使用咱們剛剛註冊的命令：

node-cli-demo
// Your cli is running.
複製代碼

自動監聽文件變更

咱們但願每次更改了 .ts 文件以後，沒必要手動執行 npm run build 就能看到最新的效果，可使用 typescript 的 --watch 選項，在 package.json 中的 script 中增長 start 命令：

{
    "script": {
+ "start": "tsc --watch"
    }
}
複製代碼

在當前目錄下運行命令：

npm start
複製代碼

而後對 src/index.ts 文件作一些更改，另開一個控制檯窗口，運行 node-cli-demo，會發現打印的內容已經更新了。 這樣咱們在開發時就只須要關注代碼編寫，而不用考慮編譯的問題了。

接下來咱們就能夠在 src 文件裏面寫咱們的具體代碼了！

注： 本文的 demo 代碼能夠在 github 上查看。爲了不建立不少倉庫，我將其放到了一個倉庫的子目錄裏面。

總結

使用 TypeScript 開發 Nodejs 命令行的流程以下：

1. 安裝 typescript 並進行配置；
2. 在 package.json 中聲明命令並使用 npm link 將其連接到全局命令中；
3. 使用 tsc --watch 自動監聽文件變更並從新編譯；
4. 運行註冊過的命令，查看效果。

以上就是搭建 Nodejs 命令行的 TypeScript 開發環境的所有內容了，但願能幫到你們~ 歡迎關注我，後續會繼續寫更多優質博客與你們分享。同時，有任何問題，歡迎一塊兒討論~

本文首發於個人博客，歡迎點擊~