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 在一起看着很挤，版本之间又重复

使用多个构建入口和常量，而非环境变量

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