/tiny-bundle

Primary LanguageTypeScript

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处理

实用的包

Reference