0

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

在此处输入图像描述

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

在此处输入图像描述

问题 Webpack 似乎没有解决require我正在使用的模块中的 's 我正在导出。

项目文件结构

  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

应用程序/背景脚本.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];

插件1/index.js

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

1 回答 1

0

回答我自己的问题

原来我的const utils = require('../../utils.js')内部app/plugins/plugin1/index.js返回一个空对象的原因是因为我定义了一个循环/循环依赖项。基本上，我正在以我需要我的模块的方式创建一个无限循环。NodeJS 以一种非常特殊的方式处理；它返回一个空对象。在此处查看此 Stackoverflow 答案

  //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-29T19:21:42.720 回答