用CycleJS加载SystemJS

Question

我试图通过SystemJS从他们的CDN加载循环DOM，内容如下：

System.config({
  map: {
    'cycle-dom': 'https://unpkg.com/@cycle/dom@17.1.0/dist/cycle-dom.js',
    'xstream': 'https://cdnjs.cloudflare.com/ajax/libs/xstream/10.3.0/xstream.min.js',
  }
});

System.import('cycle-dom', cycleDOM => {
    ...
});

但我很快发现循环-多玛需要xstream。所以我试着把两个都装上：

Promise.all([
  System.import('xstream'),
  System.import('cycle-dom')
])
.then(([xs, cycleDOM]) => {
  ...
});

但我还是会犯同样的错误。看起来，cycle-dom希望xstream在第一次加载时就存在于window上。所以我试着：

System.import('xstream')
  .then(xs => window['xstream'] = xs)
  .then(() => System.import('cycle-dom'))
  .then(cycleDOM => {
    ...
  });

我觉得我搞错了。我该怎么做？

更新：

按照martin下面的建议，我尝试将xstream配置为cycle-dom的依赖项。

这里有一个jsbin演示了。我正在做的是加载循环运行和循环-dom，然后在循环主页上运行这个示例。

但我知道错误是：

"TypeError:无法读取未定义的属性‘默认’“

在本例中未定义的是cycle-dom试图加载未加载的window['xstream']。

谢谢。

Answer 1

System.import()调用返回一个承诺，因此需要将回调放入其then()方法(第二个参数是父名，而不是回调)。

System.import('cycle-dom').then(function(cycleDOM) {
  console.log(cycleDOM);
});

这将打印模块导出。

我对cycle.js没有任何经验，所以我无法判断这是否足够。尽管如此，您仍然可以使用meta配置设置这个包依赖项：

System.config({
  map: {
    'cycle-dom': 'https://unpkg.com/@cycle/dom@17.1.0/dist/cycle-dom.js',
    'xstream': 'https://cdnjs.cloudflare.com/ajax/libs/xstream/10.3.0/xstream.min.js',
  },
  meta: {
    'cycle-dom': {
      deps: [
        'xstream'
      ]
    }
  }
});

再说一次，我不知道这是否足够。SystemJS文档包含解释得很好的示例，如何加载需要注册一些全局变量的依赖项。请参阅https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md#shim-dependencies

编辑：

在这种情况下，情况就更复杂了。cycle-run.js脚本可能是由browserify生成的，您可以看到它包含如下一行：

var xstream_1 = (typeof window !== "undefined" ? window['xstream'] : typeof global !== "undefined" ? global['xstream'] : null);

这将检查window['xstream']在加载时是否存在。这意味着在加载xstream脚本之前必须加载cycle-run.js。SystemJS的工作方式是加载请求的模块，然后加载它的依赖项(您可以在开发人员工具中看到顺序)。因此，这是与您所需要的相反的顺序(这非常类似于我在SystemJS GitHub页面上的问题)。

这意味着您需要重组导入调用：

System.config({
  // ...
  meta: {
    'xstream': {
      format: 'global',
      exports: 'xstream',
    }
  }
});

System.import('xstream').then(function() {
  Promise.all([
    System.import('cycle-run'),
    System.import('cycle-dom'),
  ])
  .then(([cycle, cycleDOM]) => {
    // ...
  });
});

这将在加载xstream之前注册cycle-run。同样，对于meta配置的xstream，这可以确保window.xstream只存在于这些回调中，并且不会泄漏到全局范围。

请参阅您的更新演示：https://jsbin.com/qadezus/35/edit?js,output

此外，要使用format和exports，您需要使用更新的SystemJS 0.20.*，而不是0.19.*。