為什麼是 TypeScript ？

TypeScript 是一個增加了靜態型別系統的 JavaScript 超集。它其餘的特性則相當密切地遵循了當前和未來的 ECMAScript 規範。對於元件庫作者來說，這意味著即便是不實際使用 TypeScript 開發的使用者，他們所使用的能對 TypeScript 智慧處理的 編輯器/IDE（比如 Visual Studio Code）也能給出更友好的自動完成等。在編寫程式碼時，當你傳入某些錯誤的東西，TypeScript 也能充當行內文件做出及時提醒，這將解救你在面對自己幾個月前開發的程式碼一籌莫展之時。

為什麼是 microbundle ？

microbundle 號稱 “微小元件的零配置打包器”。它是一個圍繞 rollup 構建的包裝器，包含了健全的預設功能（如最小化/壓縮）、美觀的打包體積輸出、多目標格式（ES modules, CommonJS, UMD）。而在本文範圍內最重要的是，其擁有開箱即用的 TypeScript 支援（真正的 無配置，甚至不用 tsconfig.json 也行）。其簡單到離譜的設定使得元件庫作者可以聚焦於構建一個極好的庫，而非為了把 ES6/TypeScript 等編譯為 JS 大費周章 。

用 microbundle 零配置打包

用 vscode 來建立專案（這裡不需要 為什麼是 vscode ?? 了吧)

1. 用 vscode 開啟一個你的專案目錄(新建)
2. 建立元件包的設定，在終端中輸入下列指令，執行後完成各項引數

npm init

3. 建立原始檔和目標資料夾

mkdir src && mkdir dist

4. 以及新增首個 TypeScript 檔案

# 手動在 vscode 中 src 目錄下新建 index.ts 或者用指令
touch src/index.ts

5. 在index.ts 中新增程式碼

# 手動在 src/index.ts 中輸入，或者用指令
echo "export class GameRoot {}" >> src/index.ts
 

6. 開啟 package.json 修改和新增程式碼

{
...
  "main": "dist/index.js",
  "source": "src/index.ts"
...
}

microbundle 會檢查 package.json 中的 "main" 和 "source" 選項（編譯後的入口檔案和源入口檔案），在本例中也就是 dist/index.js和 src/index.ts。

7. 使用 microbundle 編譯我們的元件庫

npx microbundle
# 當 npm < 5.x 時，也可以執行 ./node_modules/.bin/microbundle
# 執行後 microbundle 會將 src/index.ts 編譯到 dist 目錄中
 

檔案解析

開啟 dist 目錄，可以看到生成了很多檔案：

• index.js 是 CommonJS 模組。這是一種被 NodeJS 使用的模組型別，看起來像 const myModule = require('my-module')
• index.m.js 是 ECMAScript 模組，由 ES6 定義，看起來類似 import MyModule from 'my-module'
• index.umd.js 是 UMD 模組
• index.d.ts 是 TypeScript 型別描述檔案
• *.map 是為每個檔案提供到 TypeScript 原始檔的對映。

看看 index.js 的內容

cat dist/index.js
var n=function(){return function(){}}();exports.GameRoot=n;
//# sourceMappingURL=index.js.map

我們的 class GameRoot {} 語句被編譯為其 ES5 的等價實現，並匯出為一個 CommonJS 模組。

再來看看 index.d.ts

cat dist/index.d.ts
export declare class GameRoot {
}

這允許了一個 TypeScript 專案將正確的型別資訊反向指派給元件包 -- 通過這種間接方式，完成了本來要引入 .ts 檔案才能達到的型別識別目標。單獨的型別宣告檔案意味著非 TypeScript 專案也可以理解模組的公共 API （例如程式碼編輯器可以對 npm 包中引用的程式碼智慧自動完成）。

擴充套件操作

為便於使用我們可以將 watch 和 build 任務作為 npm scripts 放置在 package.json 中：

{
...
  "scripts": {
    ...
    "dev": "microbundle watch",
    "build": "microbundle"
  }
...
}

然後我們可以使用下列指令來執行他：

npm run build   -- 編譯
num run dev     -- 監聽檔案改變

將 microbundle 構建的模組釋出到 NPM

藉助 microbundle 可以將模組釋出為 CommonJS 模組（標準的 npm 模組），但也能作為 ES Module 和 UMD 模組，按官網文件設定即可，繼續來修改 package.json。

{
  ...
  "source": "src/index.ts",
  "main": "dist/index.umd.js",
  "module": "dist/index.modern.module.js",
  "types": "dist/index.d.ts",
  ...
}

將 package.json 如此配置後就可以通過 npm publish 釋出到 npm 了。

--- END ---