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

Question

在我们的 AngularJS 应用程序中，我们目前有很多（400 多个）文件，这些文件通过<script>-tags 包含在内。这些文件的顺序是这样的：

1. AngularJS 脚本文件
2. 3rd 方插件/模块
3. 业务逻辑文件
   • 模块
   • 服务
   • 控制器/组件/指令

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

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

但是我无法做到这一点，但我很确定其他人之前已经不得不解决这个问题。

标签： javascripttypescriptwebpack

Answer 1

一旦你决定了一个模块捆绑器，你需要了解它的功能：(1) 允许页面上的其他 JavaScript 访问包中定义的东西；(2) 允许包访问由其他 JavaScript 定义的东西。页。（如果你能够以严格的依赖顺序迁移，你可能永远不需要#2。）例如，对于 Webpack，#1 将是library*输出选项，#2 将是外部选项. 然后将代码一点一点地移动到模块中，根据需要调整配置，以便代码的每一部分都可以从代码的另一部分访问它需要的东西。由于 Webpack 仅支持单个库导出模块，因此在转换期间，您可能必须维护一个虚拟模块，该模块仅重新导出您需要从包外代码访问的所有模块。这有点乏味，并且代表了如果您一次迁移所有您不必做的额外工作，但您可能会认为值得支付这笔费用以便能够逐步迁移。

如果您在从非模块 TypeScript 文件中的 TypeScript 模块文件获取类型信息时遇到问题，请参阅此答案以获得解决方法。