Webpack3：需要在导出的模块中不起作用答案

【问题标题】：Webpack3: require inside exported module not workingWebpack3：需要在导出的模块中不起作用
【发布时间】：2018-01-04 15:44:37
【问题描述】：

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

但是，当我在我的主脚本 background-script.js 中检查我的 const utils = require(...) 时，它不使用 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

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}

【问题讨论】：

你试过'../../../util.js'吗？
这行不通，也不应该这样做，因为这会使我离开我的应用程序文件夹。今天晚些时候，我将研究 webpack 的 resolve 属性和 output.library 属性。我会回来的

标签： javascript webpack commonjs webpack-3

【解决方案1】：

回答我自己的问题

原来我在app/plugins/plugin1/index.js 中的const utils = require('../../utils.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 在我开始感觉到我的代码库中某处存在循环依赖后，帮助我找到了循环依赖。

【讨论】：