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

Question

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

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

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

我的问题是

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

我尝试了 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，请检查它是否仍然有全局感知它的客户端 - 如果没有，则它不需要全局可用。