2016-03-04 74 views
2

我有幾個兄弟姐妹文件夾/回購路徑:解決node_modules跨多個兄弟項目啓動文件夾的WebPack

| - A 
| |- node_modules 
| |- app 
| 
| - B 
| |- node_modules 
| |- app 
| 
| - C 
| |- node_modules 
| |- app 

隨着橫依賴關係,因此A可能需要一個腳本B

// A/app/script.js 
var bDependency = require('B/app/script.js') 


// B/app/script.js 
var jquery = require('jquery') 

在如的WebPack去將其捆綁這種情況下,它會解析到jqueryB小號的node_modules之前A「。這也會導致webpack bundle.js中的模塊重複,因爲它可能會解析爲其他同級node_modules文件夾。 (這種情況甚至new webpack.optimize.DedupePlugin()後)

所以,我還要把這些npm install包在B即使它A需要它,並已安裝該庫。

我使用的是決心,根和modulesDirectories的WebPack選項已經有一段友好的路徑解析。

我希望做的是首先解決任何node_modules路徑發起的文件夾。有沒有辦法通過webpack的路徑解析工具來實現這一點,還是應該重新構建應用程序以共享一個node_modules?

回答

0

這可以用的WebPack的NormalModuleReplacementPlugin解決:

new webpack.NormalModuleReplacementPlugin(new RegExp('path/to/B'), function(result) { 
    result.request = result.request.replace("projectB", "projectA"); 
}), 

任何導入的文件匹配上面的正則表達式將具有它的路徑由所述函數修改,從而導致模塊projectB/node_modulesprojectA/node_modules抓起代替,從而防止重複。

+0

感謝您的答覆@maxedison,我已經發布瞭解決方案,我看中了它曾在我的實例,並擴展到任意數量的兄弟回購。 – oller

1

我發現這是最優雅的解決方案是一個fallback屬性來定義的resolve對象指向啓動文件夾的目錄node_modules的webpack.config.js內

resolve: { 
    // Check the initiating folder's node_modules 
    fallback: [ 
     path.join(__dirname, "node_modules") 
    ] 
} 

你可以閱讀更多關於它在這裏:https://webpack.github.io/docs/configuration.html#resolve-fallback