使用 Typescript 開發(fā) Nodejs 命令行工具

來源@https://zhuqingguang.github.io/2020/11/07/nodejs-cli-with-typescript/

本文記錄了搭建基于 TypeScript 的 Nodejs 命令行開發(fā)環(huán)境的全過程。

為何使用TypeScript

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

其次，配合編輯器(如 VS Code)，TypeScript 能提供強大的代碼提示功能，我們不需要記憶很多API的具體使用，在編寫代碼時編輯器會自動進(jìn)行提示。比如引入了?http?之后，輸入?http.?就會提示可以使用的各個方法和屬性，并給出詳細(xì)的說明。

同是微軟旗下，VS Code 具有非常強大便利的功能，強烈推薦使用 VS Code 進(jìn)行 TypeScript 和 Nodejs 開發(fā)。

最后，使用 TypeScript 是大勢所趨，很多大公司都在推 TypeScript，使用 TypeScript 開發(fā)，可以讓我們對 TS 使用更加熟練。

初始化工程

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

首先創(chuàng)建一個文件夾，然后運行初始化命令：

mkdir ts-node-demo && cd ts-node-demo
npm init

控制臺會出現(xiàn)一系列提示, 按照需求輸入即可，然后一路回車，完成之后輸入?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

初始化之后本地文件夾會出現(xiàn)一個?package.json?文件。我們的 npm 包就已經(jīng)初始化完成了。為了避免誤發(fā)布，我們在?package.json?中做一個更改:

- private: false,
+ private: true,

初始化 Git

在當(dāng)前目錄下運行：

git init

然后在當(dāng)前目錄創(chuàng)建?.gitignore?文件,指定忽略?node_modules?文件夾：

node_modules/
lib/

引入 Node 類型

既然是開發(fā) Nodejs 程序，為了獲得合適的類型校驗和代碼提示，我們需要引入 Nodejs 的類型文件：

npm i -D @types/node

引入 typescript

npm i typescript

然后需要初始化?tsconfig?文件。

./node_modules/.bin/tsc --init

上述命令會在當(dāng)前文件夾下面創(chuàng)建一個?tsconfig?文件，用來指導(dǎo) TypeScript 進(jìn)行編譯。在里面有非常多的配置項，并且有非常詳細(xì)的解釋，我們做兩個更改來適配我們的項目：

+ "sourceMap": true,
+ "outDir": "lib",
+ "moduleResolution": "node",

• "sourceMap": true?指定生成 sourceMap，方便我們調(diào)試程序；

• "outDir": "lib"?指定 TypeScript 將編譯結(jié)果輸出到?./lib?文件夾；

• "moduleResolution": "node"?表明我們將使用 Nodejs 的方式去尋找模塊。

然后在與?compilerOptions?平級的地方增加選項：

+ "include": [
+    "src/**/*"
+ ]

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

編寫代碼

在當(dāng)前目錄下創(chuàng)建?src?文件夾，并創(chuàng)建?index.ts：

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

然后運行：

./node_modules/.bin/tsc

可以發(fā)現(xiàn)在文件夾下出現(xiàn)了?lib/?目錄，里面就是?index.ts?編譯之后的 js 文件。

創(chuàng)建運行腳本

每次編譯都需要引用?node_modules?里面的?tsc?命令，有些繁瑣，有三種方法可以解決：

1. 全局安裝 typescript 包：

   npm i typescript -g
   

   就可以直接使用?tsc?命令了。

2. 使用?npx?執(zhí)行?npx?是 npm 提供的命令，其會自動下載對應(yīng)的包并執(zhí)行.

   npx tsc
   

3. 創(chuàng)建 npm 腳本 在?package.json?中的?script?中增加一行腳本：

   {
    "script": {
   +       "build": "tsc"
    }
   }
   

這里我們采用第3種方法，寫入腳本后可以執(zhí)行：

npm run build

也會成功進(jìn)行編譯。

注冊命令

開發(fā) Nodejs 命令行工具，就是提供一個可以直接調(diào)用的命令，而不是使用下面這種方式執(zhí)行文件：

node lib/index.js

我們想要的效果是執(zhí)行一個命令就能調(diào)用我們的 js 文件。

首先在當(dāng)前文件夾創(chuàng)建文件?bin/node-cli-demo?:

mkdir bin && touch bin/node-cli-demo.js

然后在文件中寫入以下內(nèi)容：

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

npm 包注冊的命令需要在?package.json?中進(jìn)行聲明，增加如下內(nèi)容：

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

這表示當(dāng)執(zhí)行?node-cli-demo?這個命令時就去執(zhí)行我們的?./bin/node-cli-demo.js?文件。

最后在當(dāng)前目錄調(diào)用?npm link?，這條命令會把我們本地注冊的命令放到 Nodejs 安裝目錄的?bin?文件夾下。在安裝 Nodejs 時系統(tǒng)將該文件夾添加到命令查找的路徑中。所以我們就可以直接使用我們剛剛注冊的命令：

node-cli-demo
// Your cli is running.

自動監(jiān)聽文件變動

我們希望每次更改了?.ts?文件之后，不必手動執(zhí)行?npm run build?就能看到最新的效果，可以使用 typescript 的?--watch?選項，在?package.json?中的?script?中增加?start?命令：

{
    "script": {
+       "start": "tsc --watch"
    }
}

在當(dāng)前目錄下運行命令：

npm start

然后對?src/index.ts?文件做一些更改，另開一個控制臺窗口，運行?node-cli-demo，會發(fā)現(xiàn)打印的內(nèi)容已經(jīng)更新了。這樣我們在開發(fā)時就只需要關(guān)注代碼編寫，而不用考慮編譯的問題了。

接下來我們就可以在?src?文件里面寫我們的具體代碼了！

注：?本文的 demo 代碼可以在 github 上查看。為了避免創(chuàng)建很多倉庫，我將其放到了一個倉庫的子目錄里面。

總結(jié)

使用 TypeScript 開發(fā) Nodejs 命令行的流程如下：

1. 安裝 typescript 并進(jìn)行配置；

2. 在?package.json?中聲明命令并使用?npm link?將其鏈接到全局命令中；

3. 使用?tsc --watch?自動監(jiān)聽文件變動并重新編譯；

4. 運行注冊過的命令，查看效果。

配置ESLint

使用 ESLint 校驗我們的代碼，可以避免一些低級錯誤。而 TypeScript 現(xiàn)在推薦采用 ESLint 來檢查代碼。我們可以為我們的工程配置 ESLint。

安裝依賴

首先安裝依賴：

npm i -D eslint @typescript-eslint/parser  @typescript-eslint/eslint-plugin

• @typescript-eslint/parser 是用來解析 TypeScript 代碼的，類似于 @babel/parser；

• @typescript-eslint/eslint-plugin 是 ESLint 插件，用來配置具體的檢查規(guī)則。

設(shè)置配置

在根目錄下創(chuàng)建?.eslintrc, 寫入以下內(nèi)容：

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
        "no-console": "error"
    },
    // set eslint env
    "env": {
        "node": true
    }}

• root: true?表示當(dāng)前目錄就是尋找 ESLint 的最終配置，這樣 ESLint 就不會再往上層尋找配置；

• parse?指定了使用?@typescript-eslint/parser?來解析我們的 TypeScript 代碼；

• plugins?指定使用的 ESLint 插件；

• extends?指定了額外使用的規(guī)則配置。插件指定了一系列自定義的規(guī)則配置，只有在?extends?中指定才會生效。

• rules?中可以擴展我們自己的規(guī)則。

• env?中可以指定我們代碼運行的環(huán)境，這樣就可以自動判斷某些代碼是不是有錯誤。比如上述配置了?node: true?，我們在使用?require?的時候就不會報錯了。

運行校驗命令

在?package.json?的?script?中寫入：

{
    "script": {
        "lint": "eslint ./src --ext .ts"
    }}

上述命令指定了對?./src?目錄下擴展名為?.ts?的文件進(jìn)行校驗。

然后運行?npm run lint，會發(fā)現(xiàn)控制臺出現(xiàn)報錯，我們的 ESLint 已經(jīng)生效了。

配置 VSCode 的 ESLint 插件，編輯器在開發(fā)時就會自動提示有問題的代碼，幫助我們編寫符合規(guī)范的代碼。

忽略某些文件

我們可以指定某些目錄下的文件不進(jìn)行校驗,在當(dāng)前目錄下創(chuàng)建?.eslintignore?,類似?.gitignore,然后在里面寫入需要忽略的目錄或文件：

node_modules

至此，ESLint 也配置完成了！

以上就是搭建 Nodejs 命令行的 TypeScript 開發(fā)環(huán)境的全部內(nèi)容了，希望能幫到大家~

??愛心三連擊
1.看到這里了就點個在看支持下吧，你的「點贊，在看」是我創(chuàng)作的動力。
2.關(guān)注公眾號程序員成長指北，回復(fù)「1」加入Node進(jìn)階交流群！「在這里有好多 Node 開發(fā)者，會討論 Node 知識，互相學(xué)習(xí)」！
3.也可添加微信【ikoala520】，一起成長。

“在看轉(zhuǎn)發(fā)”是最大的支持