Question

我有一个大型（~15k LoC）JS应用程序（即NetSuite应用程序）以旧式全全局方式编写。应用程序由26个文件组成，它们之间的依赖关系完全不清楚。

目标是优雅地将应用程序重构为较小的模块。优雅地，我的意思是不打破\长时间锁定应用程序，但在较小的块中进行重构，而在完成每个块应用程序后仍然可用。

我在这里的想法是将我们现在拥有的所有JS文件连接到单文件包中。之后，可以将一些代码提取到模块中。遗留代码可以开始导入它。模块＆amp;应该使用webpack \ whatever来编译导入，而遗留代码仍然是全全局样式。最后，所有这些都被打包到单个JS文件中并进行部署。

我的问题是

可能有更好的方法吗？这听起来像是一个典型的问题
有没有可用的工具来支持我的方法？

我尝试了一下webpack，但我还没有设法得到我想要的东西。 ASP.NET和export-loader不是选项，因为需要导入\导出的方法\ vars数量。

实施例

现在代码看起来像

resolve-loader

我理想的目标是

function someGlobalFunction() {
  ...
}

var myVar = 'something';
// and other 15k lines in 26 files like this

Answer 1

我正在遵循类似于此处概述的方法：https://zirho.github.io/2016/08/13/webpack-to-legacy/

简而言之：

假设你可以将 webpack 配置成类似

export function myFunction(){...}

到浏览器可以理解的文件 bundle.js 中。在 webpack 的入口点，你可以从你的模块中导入所有东西，并将其分配给 window 对象：

// using namespace import to get all exported things from the file
import * as Utils from './utils'

// injecting every function exported from utils.js into global scope(window)
Object.assign(window, Utils).

然后，在您的 html 中，确保在现有代码之前包含 webpack 输出：

<script type="text/javascript" src="bundle.js"></script>
<script type="text/javascript" src="legacy.js"></script>

您的 IDE 应该能够在您将方法的客户端引入模块时帮助识别它们。当您将函数从 legacy.js 移至 myNiceModule.js 时，请检查它是否仍有客户端在全局范围内知道它 - 如果没有，则不需要全局可用。

如何将旧版JS应用程序迁移到模块

1 个答案: