如何模塊化遺留的JavaScript項目

我需要使用webpack構建遺留的JS項目，目前爲止沒有構建系統。如何模塊化遺留的JavaScript項目

該項目被分割成大約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，這反過來必須包括 anotherModule等

是否有辦法擺脫困境，而不必重構整個項目（並徹底打破測試套件等？）

換句話說：我可以使用webpack組裝一個大型對象，而不是隔離其各自的範圍嗎？

來源

2017-06-15 Aleksandar Dimitrov

你應該通過一對myApp參照要求

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

和模塊應該輸出的函數接受對myApp作爲參數

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

所以

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

執行的功能和用綁定到myApp的函數返回您的對象

來源

2017-06-15 13:30:12

如何模塊化遺留的JavaScript項目

回答

相關問題