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

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

(本文近日施工中...)

相关推荐