时间戳

首页 > 解决方案 > 使用 TypeScript 的捆绑器

typescript - 使用 TypeScript 的捆绑器

问题描述

TypeScript APIcustomTransformer在几个版本之前公开了 API。

我想创建一个转换器来处理 import 语句（可能也需要）来解决包依赖关系，比如webpack、browserify或parcel。

幸运的是，TypeScript 本身已经将 customTransformer API 用于非常相似的目的：

transformAMDModule在 src/compiler/transformers/module/module.ts 第 120 行

但是，该代码依赖于许多内部字段/API（并没有完全满足这里的需要）。

这个任务可以在公共 API 中完成吗？即使是简化/部分版本。

澄清一下：这是关于将应用程序的外部依赖项（例如react、moment、lodash）和应用程序代码捆绑到一大块 JS 中。尽管TypeScript目前支持--outFile参数，但它仅将应用程序代码组装在一起，而不是依赖项。

PS 通过Twitter/ 486timetable提出相同的问题，并将在此处反映任何有用的更新以供搜索。

标签： typescripttypescript-compiler-api

解决方案

没有官方答案，但这是我自己在 GitHub 上的探索：

  1. 您不能仅使用自定义转换器来实现它。需要在发射/转换阶段之前做很多工作。
  2. 第一阶段是收集模块依赖关系。这就是findDependencies在这里所做的：从 AST 中获取ts.Program和ts.TypeChecker对象并嗅出模式。理想情况下，它需要捕获：
    • import ... from "a-module"陈述
    • require("a-module")同步通话
    • import("a-module")异步调用
    • AMDdefine语法
    • AMDrequire异步调用（行为不同于全局同步require）
    • 也许 - 重定向选择加入的全局变量，如React-->import React from "react"
    • 旧语法 TypeScriptimport语句
  3. 外部依赖——捆绑（递归）。
  4. 最后，启动发射和处理/别名依赖项：
    • 如果在代码内部，只需在本地解析
    • 注入外部预捆绑的

不完全简单，但实际上是可行的。希望#TypeScript 团队的人能纠正任何错误？

推荐阅读