如何模块化遗留的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的{​​{1}}函数调用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);

执行该函数并返回带有绑定到myApp

的函数的对象