fun4wut/tiny-bundle

Tiny-Bundle

简易JS打包器，不做语法转换，只支持ESM

支持Feature

• import文件类型
  • JS
  • JSON
  • TS
• import方式
  • 本地文件
  • node_modules
  • URL
  • Path alias
  • Export from
  • Default
  • Namespace
  • Dynamic Import
• 优化
  • Parallel
  • 使用require形式（这种比较简单）
  • Tree Shaking
  • Dead Code Elimination

思路

1. 根据给定入口，进行依赖收集，获取所有待打包文件
2. 拓扑排序，确定打包顺序
3. runtime代码注入 (参考 runtime.go)
4. 符号表合并
   1. 消除同名变量，作用域提升 (通过 Scope 和 Binding找到引用节点)
5. 按顺序写入一份文件

Bundle规则(纯ESM情况)

这种情况可以作用域提升，所有模块都直接写在顶层

源文件	打包后
顶层函数 function	在顶层进行定义
顶层变量 var, let, const, class	顶层 var 定义
顶层语句	顶层中使用
别名导入 import { x as y } from 'bar'	无视别名，仍然使用 x
命名空间导入 import * as mm from 'baz'	无视命名空间，使用原本命名
默认导入 import z from 'foo'	使用 foo_default 代替 z (最麻烦，会有命名重复问题)
Node自带的module	维持使用import

Bundle规则(ESM、CJS混编情况)

模块需要用函数包一层

源文件	打包后
顶层函数 function	在顶层进行定义
顶层变量 var, let, const, class	顶层 var 声明，init 中定义
顶层语句	init 中使用

TODO

• export { a as b } 的处理
• export * 的处理
• 单元测试
• Dynamic Import处理

实用的包

• Babel Parser(Code -> AST)
• Babel Traverse(DFS遍历AST)
• Babel Template(Template -> AST)
• Babel Generator(AST -> Code)
• AST Explorer

Reference

• Babel Traverse文档
• ESBuild设计文档
• Node.js Module Wrapper
• 基于esbuild的universal bundler设计