Серверная часть реагирует с системой webpack 2.импорт

У меня есть изоморфное приложение, которое использует webpack 2 для компиляции активов. Я добавил chunking теперь с System.import который работает на стороне webpack, но не на стороне сервера с функцией не найден.

есть идеи, как я могу это решить?

7
isomorphic-javascript reactjs webpack

2 ответов

есть несколько вариантов, доступных для получения System.import работа с изоморфным / серверным рендерингом:

функции-обнаруживает System и polyfill

узел позволяет вызывать require() в ряде мест и shimming System.import следующее должно работать:

if (typeof System === "undefined") {
  var System = {
    import: function(path) {
      return Promise.resolve(require(path));
    }
  };
}

если вы ищете более надежную реализацию, есть также ЕС6-микро-погрузчик, который реализует System polyfill, который работает как в браузер и узел.

использовать babel-plugin-system-import-transformer заменить System.import с эквивалентным шаблоном UMD

i.e принимает следующую форму:

System.import('./utils/serializer').then(function(module){
    console.log(module);
});

и преобразует его в:

new Promise(function (resolve, reject) {
    var global = window;

    if (typeof global.define === 'function' && global.define.amd) {
        global.require(['utilsSerializer'], resolve, reject);
    } else if (typeof module !== 'undefined' && (module.exports && typeof require !== 'undefined') ||
               typeof module !== 'undefined' && (module.component && (global.require && global.require.loader === 'component'))) {
        resolve(require('./utils/serializer'));
    } else {
        resolve(global['utilsSerializer']);
    }
}).then(function(module){
    console.log(module);
});

или

сборка с помощью узла таргетинга Webpack (который будет использовать require для загрузки кусков):

webpack --target node
20

один из этих вариантов может удовлетворить ваши потребности:

  1. скомпилируйте свой код с помощью Webpack w/цель 'узел' и запустите серверную часть пакета.
  2. если вы уже компилируете с babel, используя babel-register или аналогичный, вы можете попробовать что-то вроде babel-плагин-удалить-webpack (может потребоваться PR, чтобы заставить его работать с System.import кроме require.ensure).
  3. определите глобальный макет для System.import который просто возвращает решен обещание с модулем require () ' D.
1