Webpack3：エクスポートされたモジュールが正しく動作しない

Question

webpackでmodule.exportsを使用するファイルの内部にutil.jsを作成したモジュールにアクセスしようとすると、ビルド時に空のオブジェクトになります。下の画像では、私のconst utils = require(...)は空のオブジェクトを返します。しかし

、私は検査私のconst utils = require(...) module.exportsはを使用していない私のメインのスクリプトbackground-script.js、内部に、それが定義されています。

問題 の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 

アプリ/背景-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 

削除モジュールwebpack-cyclic-dependency-checkerは私が私のコードベースのどこかに循環依存関係を持っていた感知し始めた後、私は循環依存を見つける助けたこのNPM。