摘要：最近發(fā)布了進(jìn)行對(duì)里冗余文件的清理，但項(xiàng)目由寫成，于是我移植了一個(gè)版本。項(xiàng)目由構(gòu)建，發(fā)布時(shí)自動(dòng)轉(zhuǎn)譯成，因此可以隨意使用等等最新語(yǔ)法和類型檢測(cè)。

這篇小教程里演示使用 TypeScript 構(gòu)建命令行工具，利用 async/await 進(jìn)行非阻塞操作，利用 mocha 自動(dòng)化測(cè)試以及 travis-ci 進(jìn)行持續(xù)集成。

最近 TJ 發(fā)布了 node-prune 進(jìn)行對(duì) node_modules 里冗余文件的清理，但項(xiàng)目由 Go 寫成，于是我移植了一個(gè) JavaScript 版本。可以搭配源碼配合繼續(xù)閱讀文章。項(xiàng)目由 TypeScript 構(gòu)建，npm 發(fā)布時(shí)自動(dòng)轉(zhuǎn)譯成 JavaScript，因此可以隨意使用 async/await 等等最新語(yǔ)法和類型檢測(cè)。同時(shí)利用 ts-node直接在 TypeScript 環(huán)境下進(jìn)行調(diào)試。項(xiàng)目代碼量很少，適合作為類似小工具的模版～

項(xiàng)目最終的結(jié)構(gòu)如下，源碼放在 src/ 目錄下，最終轉(zhuǎn)碼到 lib/ 目錄發(fā)布到 npm，test/目錄下是測(cè)試代碼。

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

首先使用 npm init 進(jìn)行項(xiàng)目的初始化并安裝 TypeScript

npm i typescript -D

輸入完畢后打開(kāi) package.json 添加：

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

tsc 是 TypeScript 轉(zhuǎn)譯的命令，-w 參數(shù)可以觀察源碼的變化持續(xù)轉(zhuǎn)譯，prepare 指令會(huì)在 npm install 和 npm publish 之前執(zhí)行，用來(lái)保證發(fā)布時(shí)是最新轉(zhuǎn)譯的代碼。

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

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

現(xiàn)在我們就可以愉快地寫 TS 代碼啦，試驗(yàn)一下寫一個(gè) walk 所有文件和文件夾的函數(shù)，

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，并對(duì)傳入?yún)?shù)進(jìn)行類型標(biāo)記，如果你使用有插件支持的編輯器，這時(shí)可以感受到智能補(bǔ)全帶來(lái)的愉快體驗(yàn)了。

npm build 一下可以在 lib/ 里面看到轉(zhuǎn)譯出來(lái)的 ES2015 代碼，稍微看一眼，可以發(fā)現(xiàn) async 是通過(guò)定義了一個(gè) __awaiter 函數(shù)來(lái)進(jìn)行的，感興趣的同學(xué)可以自行研究。

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

通過(guò) node file.js 可以運(yùn)行一個(gè)腳本，但要怎樣安裝一個(gè) npm 的可執(zhí)行文件呢，根據(jù) npmjs.com 的描述，在 package.json 中添加

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

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

為了讀取命令行傳入的參數(shù)，可以使用 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
};

可以生成這樣的結(jié)果：

$ 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]

獲取參數(shù)后就可以 import 你寫的業(yè)務(wù)代碼進(jìn)行操作，這里略去，可以在 Github 看一下例子。

之后我們可以通過(guò) npm publis 發(fā)布后 npm install -g pruner-cli 下載安裝工具之后執(zhí)行 prune 直接調(diào)用。

測(cè)試代碼同樣需要使用 TypeScript 以及 async/await。選用 mocha 進(jìn)行 BDD 風(fēng)格的測(cè)試。chai 是一個(gè) assertions 庫(kù)，搭配使用效果佳。

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

正常使用 mocha 會(huì)在 test/ 目錄下執(zhí)行 JavaScript，為了跳過(guò)轉(zhuǎn)譯直接測(cè)試 TS 代碼，我們可以綁定 ts-node 直接執(zhí)行測(cè)試代碼，在 package.json 中加入：

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

于是 test/ 下所有的 *.spec.ts 都會(huì)被測(cè)試，并且可以使用 await 異步，expect 實(shí)現(xiàn) BDD。一個(gè)例子。

在項(xiàng)目下添加 .travis.yml 后添加項(xiàng)目語(yǔ)言的配置

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

然后在 https://travis-ci.org/ 添加自己開(kāi)源的項(xiàng)目就可以在每次 push 時(shí)自動(dòng)測(cè)試編譯和 test。

點(diǎn)擊 build|passing 后將圖片的鏈接貼到項(xiàng)目的 README 中就可以在 Github 上顯示 CI 的狀態(tài)了！

原文地址