摘要：最近發布了進行對里冗余文件的清理，但項目由寫成，于是我移植了一個版本。項目由構建，發布時自動轉譯成，因此可以隨意使用等等最新語法和類型檢測。

這篇小教程里演示使用 TypeScript 構建命令行工具，利用 async/await 進行非阻塞操作，利用 mocha 自動化測試以及 travis-ci 進行持續集成。

最近 TJ 發布了 node-prune 進行對 node_modules 里冗余文件的清理，但項目由 Go 寫成，于是我移植了一個 JavaScript 版本。可以搭配源碼配合繼續閱讀文章。項目由 TypeScript 構建，npm 發布時自動轉譯成 JavaScript，因此可以隨意使用 async/await 等等最新語法和類型檢測。同時利用 ts-node直接在 TypeScript 環境下進行調試。項目代碼量很少，適合作為類似小工具的模版～

項目最終的結構如下，源碼放在 src/ 目錄下，最終轉碼到 lib/ 目錄發布到 npm，test/目錄下是測試代碼。

.
├── src/
├── test/
├── lib/
├── node_modules/
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
└── tsconfig.json

首先使用 npm init 進行項目的初始化并安裝 TypeScript

npm i typescript -D

輸入完畢后打開 package.json 添加：

{
    "scripts": {
        "build": "tsc",
        "dev": "tsc -w",
        "prepare": "npm run build",
    }
},

tsc 是 TypeScript 轉譯的命令，-w 參數可以觀察源碼的變化持續轉譯，prepare 指令會在 npm install 和 npm publish 之前執行，用來保證發布時是最新轉譯的代碼。

為了告訴 tsc 如何進行轉譯，需要一個配置文件 tsconfig.json，在命令行 tsc --init 可以生成一個默認的模版。如果要支持 Node6.x, 7.x，修改 "target": "ES2015"，對于 Node 項目。模塊生成需要 "module": "commonjs"，之后指定以下包含的 ts 文件即可。

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "outDir": "./lib",
    "strict": true
  },
  "exclude": [
    "node_modules",
    "lib"
  ],
  "include":[
    "src/**/*.ts"
  ]
}

現在我們就可以愉快地寫 TS 代碼啦，試驗一下寫一個 walk 所有文件和文件夾的函數，

import * as fs from "fs-extra";
import * as path from "path";

export async function walk(dir: string, prunerF: (p: string, s: fs.Stats) => void): Promise {
  let s = await fs.lstat(dir);
  if (!s.isDirectory()) return;

  const items = await fs.readdir(dir);
  for (let item of items) {
    const itemPath = path.join(dir, item);
    const s = await fs.lstat(itemPath);
    const pruned = await prunerF(itemPath, s);
    if (!pruned && s.isDirectory()) {
      await walk(itemPath, prunerF);
    }
  }
}

注意這里我們可以直接使用 async/await，并對傳入參數進行類型標記，如果你使用有插件支持的編輯器，這時可以感受到智能補全帶來的愉快體驗了。

npm build 一下可以在 lib/ 里面看到轉譯出來的 ES2015 代碼，稍微看一眼，可以發現 async 是通過定義了一個 __awaiter 函數來進行的，感興趣的同學可以自行研究。

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};

通過 node file.js 可以運行一個腳本，但要怎樣安裝一個 npm 的可執行文件呢，根據 npmjs.com 的描述，在 package.json 中添加

{
    "bin": {
        "prune": "lib/cli.js"
    }
}

之后就可以安裝一個 prune 到系統路徑中，而執行的文件頂部需要添加 #!/usr/bin/env node，否則不會被識別為 Node 腳本。

為了讀取命令行傳入的參數，可以使用 args，在 src/cli.ts 中這段代碼

const argv = yargs
  .usage("Prune node_modules files and dependencies

Usage: node-prune ")
  .option("config", {
    alias: "c",
    description: " config file name",
    default: ".prune.json",
    type: "string"
  })
  .option("dryrun", {
    alias: "d",
    description: "dry run",
    default: "false",
    type: "boolean"
  })
  .option("verbose", {
    description: "log pruned file info",
    default: "false",
    type: "boolean"
  })
  .help("help").alias("help", "h")
  .version("version", "0.1.0").alias("version", "v")
  .argv;

const path = argv._[0] || "node_modules";
const configs = {
  config: argv.config,
  dryrun: argv.dryrun,
  verbose: argv.verbose
};

可以生成這樣的結果：

$ prune -h
Prune node_modules files and dependencies

Usage: node-prune 

Options:
  --config, -c    config file name   [string] [default: ".prune.json"]
  --dryrun, -d   dry run                            [boolean] [default: "false"]
  --verbose      log pruned file info               [boolean] [default: "false"]
  --help, -h     Show help                                             [boolean]
  --version, -v  Show version number                                   [boolean]

獲取參數后就可以 import 你寫的業務代碼進行操作，這里略去，可以在 Github 看一下例子。

之后我們可以通過 npm publis 發布后 npm install -g pruner-cli 下載安裝工具之后執行 prune 直接調用。

測試代碼同樣需要使用 TypeScript 以及 async/await。選用 mocha 進行 BDD 風格的測試。chai 是一個 assertions 庫，搭配使用效果佳。

$ npm install mocha ts-node -g
$ npm install mocha chai ts-node --save-dev

正常使用 mocha 會在 test/ 目錄下執行 JavaScript，為了跳過轉譯直接測試 TS 代碼，我們可以綁定 ts-node 直接執行測試代碼，在 package.json 中加入：

{
    "scripts": {
        "test": "mocha -r ts-node/register test/**/*.spec.ts"
    },
}

于是 test/ 下所有的 *.spec.ts 都會被測試，并且可以使用 await 異步，expect 實現 BDD。一個例子。

在項目下添加 .travis.yml 后添加項目語言的配置

language: node_js
node_js:
  - "6"
  - "7"
  - "8"
  - "9"

然后在 https://travis-ci.org/ 添加自己開源的項目就可以在每次 push 時自動測試編譯和 test。

點擊 build|passing 后將圖片的鏈接貼到項目的 README 中就可以在 Github 上顯示 CI 的狀態了！

原文地址