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

Question

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

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

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

我的问题是

有没有更好的方法？这听起来像是一个典型的问题

是否有任何工具可用于支持我的方法？

我尝试了 webpack，但我没有设法从中得到我想要的东西。 export-loader和 resolve-loader由于需要导入\导出的方法\变量的数量，没有选项。

例子

现在代码看起来像

function someGlobalFunction() {
  ...
}

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

我理想地想要实现的是

function define(...) { /* function to define a module */ }

function require(moduleName) { /* function to import a module */ }

// block with my refactored out module definitions

define('module1', function () {
  // extracted modularised code goes here
});

define('module2', function () {
  // extracted modularised code goes here
});

// further down goes legacy code, which can import new modules

var myModule = require('myNewModule');
function myGlobalLegacyFunction() {
   // use myModule
}

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 ，检查它是否仍然有全局知道它的客户端 - 如果没有，那么它不需要全局可用。