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

标签 javascript typescript webpack

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

  1. AngularJS 脚本文件
  2. 第 3 方插件/模块
  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/

相关文章:

javascript - 如何更改 `this` 关键字的行为

angular - ng build --prod 工作不正常?如何检查?

typescript - 如何在 typescript 中导出接口(interface)集合

javascript - 如何在 React 和 Webpack 中使用 Sass-loader?

javascript - 使用 pug-html-loader 将数据传递给哈巴狗(无法读取未定义的属性)

Sass 和 webpack - @for 循环错误

javascript - 在多个按钮上使用 WordPress 媒体上传?

javascript - jQuery 输入值在 html 渲染后不会立即更改

javascript - 如何使用 React 添加帖子?

javascript - 从 JSON 对象中的数组获取数据