Как динамически загружать модули в Babel и Webpack?

Question

Я пытаюсь использовать функцию загрузки динамического модуля в ES6, и кажется, что она еще не реализована. Но есть замены вроде ES6 Module Loader Polyfill, которые якобы должны были сделать трюк на данный момент.

Итак, у меня есть проект ES6, переданный на ES5 с помощью Babel и Webpack, и он отлично работает сам по себе. Но весь мой код объединен в один файл 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 и Бабеля?

Answer 1

Здесь действительно три вещи ... dynamicimporting, ленивая загрузка и разделение/комплектация кода. 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 docs есть page that discusses dynamic imports в webpack и ограничениях.