在我们的 AngularJS 应用程序中,我们目前有很多(400 多个)文件,这些文件通过 <script>
包含在内。 -标签。这些文件的顺序是这样的:
- AngularJS 脚本文件
- 第 3 方插件/模块
- 业务逻辑文件
- 模块
- 服务
- Controller /组件/指令
我们希望采用一种更好的方法,利用模块 bundler 和 TypeScript。新文件已经用 TypeScript 编写,但不使用 import
/export
。为了让事情变得更简单,我们可以将每个 JavaScript 文件转换为 TypeScript 文件,并在可行的时间内修复由此产生的错误。
但是,在我们这样做之前,我们希望制定一个可行的策略来逐步利用 import
/export
。我正在考虑时不时地重写一个模块,从依赖关系树深处的模块开始。
但是我无法实现这一点,但我确信其他人之前已经解决过这个问题。
最佳答案
一旦您决定使用模块 bundler ,您将需要了解其功能:(1) 允许页面上的其他 JavaScript 访问 bundle 中定义的内容,以及 (2) 允许 bundle 访问其他定义的内容页面上的 JavaScript。 (如果您能够按照严格的依赖顺序进行迁移,您可能永远不需要 #2。)例如,对于 Webpack,#1 将是 library*
output options和 #2 将是 externals 。然后将代码一点一点地移动到模块中,根据需要调整配置,以便代码的每个部分都可以从代码的其他部分访问它需要的东西。由于 Webpack 仅支持单个库导出模块,因此在过渡期间,您可能必须维护一个虚拟模块,该模块仅重新导出您需要从包外部的代码访问的所有模块。这有点乏味,并且意味着如果您一次全部迁移,则不需要做额外的工作,但您可能会认为为了能够逐步迁移而付出这笔成本是值得的。
如果您在从非模块 TypeScript 文件中的 TypeScript 模块文件获取类型信息时遇到问题,请参阅 this answer寻求解决方法。
关于javascript - 逐渐从包含每个 JS 文件转向模块捆绑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52858367/