如何在Babel和Webpack中動態加載模塊？

我想在ES6中使用動態模塊加載功能，它似乎並沒有實際實現。但是還有像ES6 Module Loader Polyfill這樣的替代品，據說暫時應該這樣做。如何在Babel和Webpack中動態加載模塊？

所以我有一個ES6項目使用Babel和Webpack轉換到ES5，並且它可以正常工作。但是我所有的代碼都被合併成了一個我想分割成模塊的bundle.js文件。當我嘗試提到的Polyfill時，它會從內部引發一些錯誤，並且項目甚至不會啓動。

index.js:6 Uncaught TypeError: Cannot read property 'match' of undefined

第6行寫着：

var filePrefix = 'file:' + (process.platform.match(/^win/) ? '/' : '') + '//';

這是我的package.js文件：

{ 
    "dependencies": { 
    "es6-module-loader": "^0.17.11", 
    "events": "^1.1.0", 
    "flux": "^2.1.1", 
    "fs": "0.0.2", 
    "react": "^15.0.2", 
    "react-addons-css-transition-group": "^15.0.2", 
    "react-dom": "^15.0.2", 
    "react-router": "^2.4.0", 
    "react-tap-event-plugin": "^1.0.0", 
    }, 
    "devDependencies": { 
    "babel-core": "^6.8.0", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "html-webpack-plugin": "^2.16.1", 
    "react-hot-loader": "^1.3.0", 
    "transfer-webpack-plugin": "^0.1.4", 
    "webpack": "^1.13.0", 
    } 
}

可有人請點我的動態模塊加載與的WebPack和巴貝爾工作的例子嗎？

來源

2016-05-13 Mehran

你可能會說'require.ensure' - [這是一個工作示例]（https://github.com/topheman/webpack-babel-starter/blob/master/src/bootstrap.js#L57） – topheman

@topheman我認爲這是一種不同的技術，但很高興知道。謝謝。 – Mehran

這裏真的有三件事... dynamic importing，延遲加載和代碼拆分/捆綁。該System.import方法，聚充滿ES6 Module Loader將允許動態的進口，但不動態code splitting：

然而，最transpilers不支持轉換System.load調用require.ensure所以你必須，如果你想這樣做直接利用動態代碼分割。

動態代碼拆分是當您在入口點內創建子包時，您可以動態延遲加載。爲此，我建議你使用promise-loader這是一個有點比require.ensure更友好：

import LoadEditor from 'promise?global,[name]!./editor.js'; 

... 

if (page === 'editor') { 
    LoadEditor().then(Editor => { 
    // Use the Editor bundle... 
    }) 
}

WebPACK現在可將打破editor.js模塊和它的所有依賴關係到其可立即或動態加載單獨的包（如圖所示以上）。最後，根據應用程序的大小，我認爲你也應該考慮splitting the vendor code out。

UPDATE

System.import從規範取出，並通過剛剛import()更換。新的webpack文檔在webpack中有page that discusses dynamic imports以及它們的侷限性。

來源

2016-05-14 05:46:04

有沒有什麼辦法可以省略'editor.js'而不是在我的代碼中命名？我需要編寫一個加載文件的代碼，而不必事先了解它。在我看到的所有示例中，要加載的模塊在相同的文件中顯式命名，因爲它將被動態加載！它對我來說聽起來不那麼活躍。 – Mehran

@Mehran如鏈接答案中所述，動態可以引用很多東西，但通常意味着需要運行一些代碼來確定是否加載模塊。你想使用變量名或其他東西來導入它？你是否試圖迭代並加載一堆文件？ –

的確，我有一組我想根據用戶事件加載的文件路徑。迭代代碼不知道它們是什麼。它只是讓他們在一個變量。甚至有些情況下，該集合在運行時被填充！ – Mehran

如何在Babel和Webpack中動態加載模塊？

回答

相關問題