動態需要在webpack

/網絡/公/ JS /核心

我的核心文件夾包括：模塊，輔助性，配置，STYL，core.js，base.js，service.js。

我使用webpack進行構建，並在我的service.js中使用動態要求。

例如：

config.js

export default { 
    modules: { 
     validation: 'validation', 
     async: 'asyncLoadContent', 
     carousel: 'carousel', 
     tab: 'tab', 
     accordeon: 'accordeon', 
     modal: 'modal', 
     lightbox: 'lightbox', 
     zoom: 'zoom', 
     notification: 'notification', 
     slider: 'slider', 
     rates: 'rates' 
    }, 
    helper: { 
     event: 'event', 
     css: 'css', 
     error: 'error', 
     transition: 'transition' 
    } 

}

service.js 在這個文件我從配置文件中的JSON對象我通過它遞歸併形成路徑加載模塊或助手。因此，這些模塊位於路徑/核心/助手中，沿路徑/核心/模塊的模塊，即目錄不同，路徑是動態的。

registrationModule(config, option){ 

     for(let key in config){ 

      if(typeof config[key] == 'object' && !this.classes[key]){ 
       this.classes[key] = {}; 
       this.registrationModule(config[key], key); 
      } else { 

       let url = (option == 'modules') ? option + '/' + key + '/' + config[key] : option + '/' + config[key]; 

       //!!!!! PROBLEM !!!!!!!/ 
       let module = require("./" + url + '.js').default; 

       this.setModule(key, option, module); 
      } 

     } 

    }

構建之前，我已經警告

WARNING in ./web/public/js/core ^\.\/.*\.js$ 
Module not found: Error: a dependency to an entry point is not allowed 
@ ./web/public/js/core ^\.\/.*\.js$

而且在構建我看到：

var map = { 
     "./base.js": 24, 
     "./config/config.js": 26, 
     "./helper/css.js": 30, 
     "./helper/error.js": 27, 
     "./helper/event.js": 31, 
     "./helper/transition.js": 32, 
     "./modules/accordeon/accordeon.js": 33, 
     "./modules/accordeon/accordeon.md.js": 34, 
     "./modules/async/asyncLoadContent.js": 35, 
     "./modules/carousel/carousel.js": 36, 
     "./modules/carousel/carousel.md.js": 37, 
     "./modules/lightbox/lightbox.js": 38, 
     "./modules/lightbox/lightbox.md.js": 39, 
     "./modules/lightbox/lightbox.view.js": 40, 
     "./modules/modal/modal.js": 41, 
     "./modules/modal/modal.md.js": 42, 
     "./modules/modal/modal.view.js": 43, 
     "./modules/notification/notification.js": 44, 
     "./modules/notification/notification.md.js": 45, 
     "./modules/rates/rates.js": 46, 
     "./modules/rates/rates.md.js": 47, 
     "./modules/slider/slider.js": 48, 
     "./modules/slider/slider.md.js": 49, 
     "./modules/tab/tab.js": 50, 
     "./modules/tab/tab.md.js": 51, 
     "./modules/validation/validation.js": 52, 
     "./modules/validation/validation.md.js": 53, 
     "./modules/zoom/zoom.js": 54, 
     "./modules/zoom/zoom.md.js": 55, 
     "./modules/zoom/zoom.view.js": 56, 
     "./service.js": 25 
    };

地圖包括：」 ./base.js 「：24，」 ./service .js「：25.

我從控制檯中的錯誤瞭解如何解決它？如何讓webpack理解，以便在動態生成路徑時只按照我想要的方式查找文件。

來源

2017-06-27 Владимир Вячеславович

像這樣的問題是爲什麼動態需求通常會導致問題。 Webpack無法知道你想要什麼，所以它必須包含所有可能性，其中包括入口點。 – loganfsmyth

我想要一個解決方案，例如requireOnlyPath（變量）將解決所有問題。事實證明，如果使用webpack，所有模塊助手和其他通過它的手段將收集它是必要進行一個單獨的目錄（（（（（ –

對於這種特殊情況，您應該可以使用代碼向Webpack說明您只關心助手和模塊的代碼，例如，

let module; 
if (option === "modules") { 
    module = require("./modules/" + key + '/' + config[key] + '.js'); 
} else if (option === "helper") { 
    module = require("./helper/" + key + '.js'); 
} else { 
    throw new Error("Unexpected option value;"); 
} 

this.setModule(key, option, module.default);

因爲require電話有一個特定的前綴的WebPack可以拿起，它會知道你不關心根級別的文件。

但是請注意，像這樣構建自定義註冊會讓您的依賴關係圖超級難以遵循，並使得使用這樣的代碼非常煩人。

來源

2017-06-27 20:40:06 loganfsmyth

非常感謝））因爲我沒有猜到）你甚至可以做一個對象和訪問鍵以避免if。 –

動態需要在webpack

回答

相關問題