2019年個人 TypeScript 輪子這樣寫

（本文近日施工中...）

與各位分享近期筆者寫一個較繁複的輪子的過程，以及其中的踩坑與思考。如有更佳實踐，還望不吝賜教。

要素察覺：目錄結構， git 分支策略， TS 與 Lint ，多個構建入口和目標包格式 (TS 與 構建，TS 與 Jest(測試) ，Rollup)， tree shaking 與搖不下來的反作用，蛋疼的 jest debug 與 source map 。

輪子樣貌

輪子是作 Flow-based Programming 用的，主要和我導師項目有關，若是你對這種編程範式有興趣，能夠進入 這個 Wiki 傳送門 和 這個 awesome-fbp 項目看看相似的 FBP 項目。用過 IBM 的 UML 工具的同窗可能更好理解，它相似活動和狀態圖。拿經常使用的庫做比較的話，這個庫性質相似 lodash, RxJS 這種輔助 coding 的工具庫，這種範式有函數式和響應式編程的味道，具體是屬於數據流編程的一種。由於解釋起來很麻煩，因此略去千字...

一些小目標

覆蓋主要幾種包格式

• CommonJS：Node.js 的尋常包格式，用 npm 安裝再直接 require 那種
• ES Module：ES2015 標準推的 JS 模塊標準，搭配 webpack/rollup 搖一搖食用更佳，rollup 還會作數據流分析，搖樹的力度更大。咱們把 ESM 版本也放在 npm 發佈的包裏，提供 package.json 中的 module 字段和一個 path-mapping 文件（給 Babel/webpack/rollup 配置時用的），將用戶普通 require 的目標重定向到 ESM 版本
• UMD：一種兼容 CJS，ESM，AMD 以及全局導出的包格式。一般直接 HTML 裏 <script src="..."> 的那種。一樣把它放在 npm 包中，再給 package.json 添加 unpkg, jsdelivr 字段，這兩家是 npm 的 CDN ，使用戶從 CDN 加載時指向 UMD 格式的包。
• ES Module (browser): ESM 格式的包，給瀏覽器用的，<script type="module" src="..."></script> 的那種。

CJS 和 ESM 發佈的包應是模塊化、多文件的，UMD 和 ESM-browser 則將全部文件打成一個包，方便用戶下載和導入。

• typings：TypeScript 的聲明文件，建議看成一個版本，單獨放在一個文件夾；否則 *.js, *.js.map, *.d.ts 在一塊兒看着很擠，版本之間又重複

使用多個構建入口和常量，而非環境變量

（本文近日施工中...）