首页 文章

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

提问于
浏览 次
0

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

enter image description here

但是，当我检查我的主脚本 background-script.js 中的 const utils = require(...) 时，它没有't use a module.exports, it'定义 .

enter image description here

Problem Webpack似乎没有使用我的导出解析 require 's inside the modules I' m .

Project File 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}
javascript webpack commonjs webpack-3

1 回答

  • 0

    Answering my own question

    原来 app/plugins/plugin1/index.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在我开始感知之后帮助我找到了循环依赖，我的代码库中有一个循环依赖 .

    回复于

相关问题