Webpack3: nécessite que le module exporté ne fonctionne pas

Question

Lorsque j'essaie d'accéder à un module, j'ai créé util.js dans un fichier où j'utilise module.exports dans webpack, il en résulte un objet vide lors de la construction. Dans l'image ci-dessous, mon const utils = require(...) renvoie un objet vide.

Cependant, quand j'inspecter mon const utils = require(...) à l'intérieur de mon script principal background-script.js, qui n'utilise un module.exports, il est défini.

Problème Webpack ne semble pas résoudre les « s à l'intérieur require les modules que je utilise je suis l'exportation.

fichier projet Structure

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 

app/background-script.js

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

app/utils.js

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

plugins/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} 

Answer 1

répondre à ma propre question

la raison Allume pourquoi mon const utils = require('../../utils.js') intérieur app/plugins/plugin1/index.js rentrait un objet vide était parce que j'avais une dépendance circulaire/cyclique définie. Fondamentalement, je créais une boucle infinie avec la façon dont j'avais besoin de mes modules . NodeJS gère de manière très spécifique; il renvoie un objet vide. Voir cette Stackoverflow répondre 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` 

dépendances circulaires sont généralement le résultat d'une mauvaise organisation du code. Pour résoudre mon problème, je l'ai enlevé

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

Ce module NPM webpack-cyclic-dependency-checker m'a aidé à trouver la dépendance cyclique après avoir commencé la détection j'avais une dépendance cyclique quelque part dans ma base de code.