如何让 TypeScript 从 node_modules 捆绑第 3 方库？

Posted 2023-02-16

【中文标题】如何让 TypeScript 从 node_modules 捆绑第 3 方库？

【英文标题】：How do I get TypeScript to bundle a 3rd party lib from node_modules?

【发布时间】：2017-12-07 04:47:23

【问题描述】：

我希望 TypeScript 编译器使用 node_modules/firebase/firebase.d.ts 对我的代码进行类型检查，并将 node_modules/firebase/firebase.js 捆绑到一些我从 firebase 导入内容的文件中。我知道有 many options 会为我做这件事，但我想保持一个最小的开发环境。

我在我的tsconfig.json 中设置了"moduleResolution": "node"，它会根据需要导入定义和类型检查我的代码。我还添加了"isolatedModules": true，试图让它将实际代码捆绑到我的每个目标中，但生成的代码并没有像我想要的那样捆绑 firebase.js。是否有 "module" 编译器选项可以为我执行此操作，还是我应该添加其他内容？

如果我在开发过程中绝对需要另一个工具，那么对 tsc 的最简单补充是什么？它将我的每个 JS 文件及其依赖项捆绑到一个 js 文件包中？

【问题讨论】：

您应该考虑将其缩小到第一句中的问题。最后两句提出了一个单独的问题，不仅太含糊，而且还得到了回答：***.com/questions/35062852/…

我的问题是最后一个问题——我应该使用tsc 进行捆绑吗？我将删除类型检查，因为这显然是 tsc 的设计目的。好点，谢谢。

这也可能是重复的：***.com/q/40019087/1233251 虽然它特别提到了 Node.js 模块，但它解释了为什么 tsc 通常不用于捆绑。

参见：***.com/q/42788059/1233251

谢谢，这是一个有点令人困惑的问题，但答案也确实回答了我的问题。很高兴让这个更清晰。

【参考方案1】：

tsc 是编译器，而不是捆绑器。 This question稍微解释一下捆绑。

在使用 TypeScript 开发时，gulp + gulp-browserify 可以提供观察者和捆绑器。

在编译器选项中使用"module": "umd"，这个gulpfile.js 将完成剩下的工作：

var gulp = require('gulp');
var ts = require('gulp-typescript');
var browserify = require('gulp-browserify');

gulp.task('default', function () 
  return gulp.src('src/*.ts')
    .pipe(ts.createProject('tsconfig.json')())
    .pipe(browserify())
    .pipe(gulp.dest('dist/gen'));
);

gulp.task('watch', ['default'], function () 
  gulp.watch('src/*.ts', ['default']);
);