為什么是 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 ?? 了吧)
- 用 vscode 打開一個你的項目目錄(新建)
- 創建組件包的設置，在終端中輸入下列指令，運行后完成各項參數
npm init
- 創建源文件和目標文件夾
mkdir src && mkdir dist
- 以及添加首個 TypeScript 文件
# 手動在 vscode 中 src 目錄下新建 index.ts 或者用指令
touch src/index.ts
- 在index.ts 中添加代碼
# 手動在 src/index.ts 中輸入，或者用指令
echo "export class GameRoot {}" >> src/index.ts
- 打開 package.json 修改和添加代碼
{
...
"main": "dist/index.js",
"source": "src/index.ts"
...
}
microbundle 會檢查 package.json 中的 "main" 和 "source" 選項（編譯后的入口文件和源入口文件），在本例中也就是 dist/index.js和 src/index.ts。
- 使用 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 了。