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

來(lái)源 |?https://zhuqingguang.github.io/2020/11/07/nodejs-cli-with-typescript/

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

為何使用TypeScript

首先，對(duì)于編寫(xiě)類庫(kù)或者工具而言，使用 TypeScript 的最大好處就是其提供了類型機(jī)制，可以避免我們犯一些低級(jí)錯(cuò)誤。

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

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

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

初始化工程

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

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

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

控制臺(tái)會(huì)出現(xiàn)一系列提示, 按照需求輸入即可，然后一路回車，完成之后輸入 yes 。

package name: (typescript-cli) version: (1.0.0) description: a cli in typescriptentry point: (index.js) test command: git repository: keywords: CLI,TypeScriptauthor: YourNamelicense: (ISC) MIT

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

- private: false,+ private: true,

初始化 Git

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

git init

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

node_modules/lib/

引入 Node 類型

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

npm i -D @types/node

引入 typescript

npm i typescript

然后需要初始化 tsconfig 文件。

./node_modules/.bin/tsc --init

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

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

上述配置指定生成?sourceMap?文件，并將 TypeScript 的編譯結(jié)果輸出到?./lib?文件夾.

然后在與 compilerOptions 平級(jí)的地方增加選項(xiàng)：

"compilerOptions": {    ...},+ "include": [+    "src/**/*"+ ]

這表示我們只會(huì)編譯 src 目錄下的 .ts 文件。

編寫(xiě)代碼

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

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

然后運(yùn)行：

./node_modules/.bin/tsc

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

創(chuàng)建運(yùn)行腳本

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

全局安裝 typescript 包：

npm i typescript -g

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

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

npx tsc

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

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

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

npm run build

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

注冊(cè)命令

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

node lib/index.js

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

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

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

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

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

npm 包注冊(cè)的命令需要在 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 這個(gè)命令時(shí)就去執(zhí)行我們的 ./bin/node-cli-demo.js 文件。

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

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

自動(dòng)監(jiān)聽(tīng)文件變動(dòng)

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

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

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

npm start

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

接下來(lái)我們就可以在 src 文件里面寫(xiě)我們的具體代碼了！

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

總結(jié)

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

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

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

使用 tsc --watch 自動(dòng)監(jiān)聽(tīng)文件變動(dòng)并重新編譯；

運(yùn)行注冊(cè)過(guò)的命令，查看效果。

配置ESLint

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

安裝依賴

首先安裝依賴：

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

@typescript-eslint/parser 是用來(lái)解析 TypeScript 代碼的，類似于 @babel/parser；

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

設(shè)置配置

在根目錄下創(chuàng)建 .eslintrc, 寫(xiě)入以下內(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 就不會(huì)再往上層尋找配置；

parse 指定了使用?@typescript-eslint/parser 來(lái)解析我們的 TypeScript 代碼；

plugins 指定使用的 ESLint 插件；

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

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

env 中可以指定我們代碼運(yùn)行的環(huán)境，這樣就可以自動(dòng)判斷某些代碼是不是有錯(cuò)誤。比如上述配置了 node: true ，我們?cè)谑褂?require 的時(shí)候就不會(huì)報(bào)錯(cuò)了。

運(yùn)行校驗(yàn)命令

在 package.json 的 script 中寫(xiě)入：

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

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

然后運(yùn)行 npm run lint，會(huì)發(fā)現(xiàn)控制臺(tái)出現(xiàn)報(bào)錯(cuò)，我們的 ESLint 已經(jīng)生效了。

配置 VSCode 的 ESLint 插件，編輯器在開(kāi)發(fā)時(shí)就會(huì)自動(dòng)提示有問(wèn)題的代碼，幫助我們編寫(xiě)符合規(guī)范的代碼。

忽略某些文件

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

node_modules

至此，ESLint 也配置完成了！

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