javascript - 逐渐从包含每个 JS 文件转向模块捆绑

Question

在我们的 AngularJS 应用程序中，我们目前有很多(400 多个)文件，这些文件通过 <script> 包含在内。 -标签。这些文件的顺序是这样的:

1. AngularJS 脚本文件
2. 第 3 方插件/模块
3. 业务逻辑文件
   • 模块
   • 服务
   • Controller /组件/指令

我们希望采用一种更好的方法，利用模块 bundler 和 TypeScript。新文件已经用 TypeScript 编写，但不使用 import/export 。为了让事情变得更简单，我们可以将每个 JavaScript 文件转换为 TypeScript 文件，并在可行的时间内修复由此产生的错误。

但是，在我们这样做之前，我们希望制定一个可行的策略来逐步利用 import/export 。我正在考虑时不时地重写一个模块，从依赖关系树深处的模块开始。

但是我无法实现这一点，但我确信其他人之前已经解决过这个问题。

Answer 1

一旦您决定使用模块 bundler ，您将需要了解其功能:(1) 允许页面上的其他 JavaScript 访问 bundle 中定义的内容，以及 (2) 允许 bundle 访问其他定义的内容页面上的 JavaScript。 (如果您能够按照严格的依赖顺序进行迁移，您可能永远不需要 #2。)例如，对于 Webpack，#1 将是 library* output options和 #2 将是 externals 。然后将代码一点一点地移动到模块中，根据需要调整配置，以便代码的每个部分都可以从代码的其他部分访问它需要的东西。由于 Webpack 仅支持单个库导出模块，因此在过渡期间，您可能必须维护一个虚拟模块，该模块仅重新导出您需要从包外部的代码访问的所有模块。这有点乏味，并且意味着如果您一次全部迁移，则不需要做额外的工作，但您可能会认为为了能够逐步迁移而付出这笔成本是值得的。

如果您在从非模块 TypeScript 文件中的 TypeScript 模块文件获取类型信息时遇到问题，请参阅 this answer寻求解决方法。