Webpack3：要求導出模塊內部不工作

嘗試訪問模塊時，我在創建util.js的文件中使用0123package，在webpack中使用module.exports，它會在構建時產生一個空對象。在下圖中，我的const utils = require(...)返回空對象。Webpack3：要求導出模塊內部不工作

然而，當我檢查我的const utils = require(...)在我的主腳本background-script.js，它不使用module.exports的，它的定義。

問題的WebPack似乎並沒有被解決，我用我正在導出模塊內部的require的。

項目文件結構

app 
    ├──plugins 
    │   ├── index.js (exports all my plugins) 
    | ├──plugin1 
    | │   ├── index.js (simply exports an object) 
    | | 
    | |──plugin2 
    |  ├── index.js (simply exports an object) 
    | 
    |--utils.js 
    |--background-script.js

應用/背景的script.js

const utils = require('../../util.js');

應用程序/ utils.js

const utils ={....}; 
    utils.plugins = require('./plugins/index.js'); 
    module.exports = utils;

插件/ index.js

//require all `index.js` file from each plugin directory; works great. 
    const context = require.context('.', true, /index\.js/); 
    const requireAllPlugins = function(ctx) { 
    const keys = ctx.keys(); 
    const values = keys.map(ctx); 
    return values; 
    } 
    const allPlugins = requireAllPlugins(context); 
    module.exports = [...allPlugins];

plugin1/index.js

//utils is an empty object 
    const utils = require('../../util.js'); 
    module.exports = {action: utils.renderBookmark}

來源

2017-07-28 Clifford Fajardo

你有沒有試過''../../../ util.js''？ – marzelin

這是行不通的，因爲這會讓我離開我的應用程序文件夾。我將在今天晚些時候查看webpack的「resolve」屬性和「output.library」屬性。我會回來的 –

回答我的問題

原來爲什麼我的const utils = require('../../utils.js')內app/plugins/plugin1/index.js返航的原因空對象是因爲我定義了循環/循環依賴項。基本上，我用我需要我的模塊的方式創建了一個無限循環。 NodeJS以非常特定的方式處理;它返回一個空對象。看到這個回答＃1 here

//app/background-script.js 
    const utils = require('../../util.js'); 
    | 
    | 
    ↓ 
    //app/utils.js 
    const utils = {...} 
    utils.plugins = require('./plugins/index.js'); 
    | 
    | 
    ↓ 
    //app/plugins/index.js 
    const context = require.context('.', true, /index\.js/); 
    const requireAllPlugins = function(ctx) { 
     const keys = ctx.keys(); 
     const values = keys.map(ctx); 
     return values; 
    } 
    const allPlugins = requireAllPlugins(context); 
    module.exports = [...allPlugins]; 
    | 
    | 
    ↓ 
    //plugins/plugin1/index.js 
    const utils = require('../../util.js'); 
    | module.exports = {action: utils.renderBookmark} 
    | 
    ↓ 
    // app/utils.js 
    const utils = {...} 
     utils.plugins = require('./plugins/index.js'); //restarts the calls above again. 
    | 
    | 
    ↓ Node detected a circular dependency, so instead of repeating these calls again, forever, return `{}` instead. This `{}` will become the 
    value of `utils` inside `plugins/plugin1/index.js`

循環的依賴關係通常是不好的代碼組織的結果。爲了解決我的問題，我刪除

`require('./plugins/index.js');` from utils

這NPM模塊webpack-cyclic-dependency-checker幫我找到循環依賴後，我開始感應我在代碼庫中有一個循環依賴地方。

來源

2017-07-29 19:21:42

Webpack3：要求導出模塊內部不工作

回答

相關問題