Question

当我尝试访问模块时，我在webpack中使用util.js的文件中创建了module.exports，这会在构建时产生一个空对象。在下图中，我的const utils = require(...)返回一个空对象。

但是，当我检查我的主脚本const utils = require(...)内的background-script.js时，它没有使用module.exports，它已被定义。

问题 Webpack似乎没有解决我使用i＆m; m export导出的模块中的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}

Answer 1

回答我自己的问题

原因是我const utils = require('../../utils.js')内app/plugins/plugin1/index.js返回一个空对象的原因是因为我定义了循环/循环依赖。基本上，我用我需要的方式创建了一个无限循环模块。 NodeJS以非常具体的方式处理;它返回一个空对象。请参阅此Stackoverflow回答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帮助我在开始感知之后找到了循环依赖，我在代码库中的某处有一个循环依赖。

Webpack3：要求内部导出的模块不起作用

1 个答案: