原文：https://codewithhugo.com/microbundle-typescript-npm-module/前端
爲何是 TypeScript ？
TypeScript 是一個增長了靜態類型系統的 JavaScript 超集。它其他的特性則至關密切地遵循了當前和將來的 ECMAScript 規範。對於組件庫做者來講，這意味着即使是不實際使用 TypeScript 開發的用戶，他們所使用的能對 TypeScript 智能處理的 編輯器/IDE（好比 Visual Studio Code）也能給出更友好的自動完成等。在編寫代碼時，當你傳入某些錯誤的東西，TypeScript 也能充當行內文檔作出及時提醒，這將解救你在面對本身幾個月前開發的代碼束手無策之時。node
爲何是 microbundle ？
microbundle 號稱 「微小組件的零配置打包器」。它是一個圍繞 rollup 構建的包裝器，包含了健全的默認功能（如最小化/壓縮）、美觀的打包體積輸出、多目標格式（ES modules, CommonJS, UMD）。而在本文範圍內最重要的是，其擁有開箱即用的 TypeScript 支持（真正的 無配置，甚至不用 tsconfig.json 也行）。其簡單到離譜的設置使得組件庫做者能夠聚焦於構建一個極好的庫，而非爲了把 ES6/TypeScript 等編譯爲 JS 大費周章 🙂。web
用 microbundle 零配置打包
首先，咱們得經過 npm init 建立組件包的設置，運行之並完成全部提示性選項。typescript
接下來運行：npm i --save-dev microbundle.npm
建立源文件和目標文件夾：mkdir src && mkdir distjson
以及添加首個 TypeScript 文件：touch src/index.ts.微信
爲 index.ts 增添一個類，這樣咱們就不至於編譯空文件了：echo "export class MyMainClass {}" >> src/index.ts併發
microbundle 會檢查 package.json 中的 "main" 和 "source" 選項（編譯後的入口文件和源入口文件），在本例中也就是 dist/index.js（尚不存在）和 src/index.ts。如今動手在 package.json 中加入這兩項：app
{
"main": "dist/index.js",
"source": "src/index.ts"
}
這意味着 microbundle 如今知曉瞭如何編譯咱們的組件庫，運行 npx microbundle （當 npm < 5.x 時，也能夠運行 ./node_modules/.bin/microbundle）。編輯器
這會將你的 src/index.ts 編譯到 dist 文件夾中。若是查看後者的內容，你將看到 microbundle 爲你作了多少工做：
ls dist
index.d.ts index.js.map index.m.js.map index.umd.js.map
index.js index.m.js index.umd.js
來看一下這都是些什麼：
-
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.MyMainClass=n;
//# sourceMappingURL=index.js.map
咱們的 class MyMainClass {} 語句被編譯爲其 ES5 的等價實現，並導出爲一個 CommonJS 模塊。
index.d.ts 一樣有趣：
cat dist/index.d.ts
export declare class MyMainClass {
}
這容許了一個 TypeScript 項目將正確的類型信息反向指派給組件包 -- 經過這種間接方式，完成了原本要引入 .ts 文件才能達到的類型識別目標。單獨的類型聲明文件意味着非 TypeScript 項目也能夠理解模塊的公共 API （例如代碼編輯器能夠對 npm 包中引用的代碼智能自動完成）。
microbundle 也能監視文件改變：npx microbundle watch。
爲便於使用咱們能夠將 watch 和 build 任務做爲 npm scripts 放置在 package.json 中：
{
"scripts": {
"dev": "microbundle watch",
"build": "microbundle"
}
}
將 microbundle 構建的模塊發佈到 NPM
藉助 microbundle 能夠將模塊發佈爲 CommonJS 模塊（標準的 npm 模塊），但也能做爲 ES Module 和 UMD 模塊，按官網文檔設置便可。
tl;dr
-
"source": "src/index.ts" -
"main": "dist/index.umd.js" -
"module": "dist/index.modern.js" -
"types": "dist/index.d.ts"
換言之，package.json 看起來應該是相似這樣的：
{
"// other": "fields",
"source": "src/index.ts",
"main": "dist/index.umd.js",
"module": "dist/index.modern.module.js",
"types": "dist/index.d.ts",
"// more": "fields"
}
將 package.json 如此配置後就能夠經過 npm publish 發佈到 npm 了。
--End--
查看更多前端好文
請搜索 fewelife 關注公衆號
轉載請註明出處
本文分享自微信公衆號 - 雲前端（fewelife）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。