服务器端与webpack 2 System.import做出反应

Question

我有一个使用webpack 2编译资产的同构应用程序.我现在添加了分块,System.import它在webpack端工作但在服务器端没有找到功能.

知道如何解决这个问题吗？

Answer 1

有几个选项可供使用System.import同构/服务器端渲染:

特征检测System和polyfill

Node允许您require()在多个地方进行呼叫,并System.import按照以下方式进行填充:

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

如果您正在寻找更强大的实现,那么还有es6-micro-loader,它实现了一个System可在浏览器和节点中运行的polyfill.

使用babel-plugin-system-import-transformer替换System.import为等效的UMD模式

即采取以下形式:

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