javascript - 如何模块化遗留 JavaScript 项目

Question

我需要使用 webpack 构建一个迄今为止还没有的遗留 JS 项目构建系统。

该项目被分成约 30 个 JS 文件，所有这些文件都分配了函数和字段到单个全局 myApp 巨型对象。以前，所有这些文件都单独包含在一个命名空间中。它看起来有点像这样:

myApp.js:

const myApp = {
  saySomething: function(x) {
    console.log(x);
  },
  something: "something"
};

someModule.js:

myApp.anotherModule = {
  foo: function(x) {
    myApp.someModule.bar(x);
  }
};

anotherModule.js:

myApp.someModule = {
  bar: function(x) {
    myApp.saySomething(x);
  },
  start: function() {
    myApp.someModule.foo(myApp.something);
  }
};

入口点将调用myApp.someModule.start()，控制流将编织在巨型物体的不同部分之间。

我尝试像这样分解出 index.js :

const myApp = require('./myApp');
myApp.someModule = require('./someModule');
myApp.anotherModule = require('./anotherModule');

(在相应文件中使用适当的 module.exports 声明。)

但是当例如anotherModule 的 start 函数调用 myApp.someModule.foo()，这不在范围内。我无法使用模块中的 require 将其纳入范围本身 - 我必须包含 someModule，而这又必须包含另一个模块等

有没有办法摆脱这个困惑而不必重构整个项目(并彻底破坏测试套件等？)

换句话说:我可以使用 webpack 来组装一个巨型对象而不隔离其各个部分各自的范围吗？

Answer 1

您应该将 myApp 引用传递给 require

require('./someModule')(myApp);

并且模块应该导出一个接受 myApp 作为参数的函数

myApp.anotherModule = function(myApp) {
  return {
       foo: function(x) {
       myApp.someModule.bar(x);
     }
  }
};

所以

myApp.someModule = require('./someModule')(myApp);

执行函数并返回带有绑定(bind)到 myApp 的函数的对象