1

我尝试通过 SystemJS 从他们的 CDN 加载 Cycle 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 => {
    ...
});

但我很快就发现了 cycle-dom 的需求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 => {
    ...
  });

我觉得我对这一切都错了。我怎样才能做到这一点？

更新：

按照下面马丁的建议，我尝试将其配置xstream为cycle-dom.

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

但我得到了错误：

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

在这种情况下，未定义是cycle-dom试图加载window['xstream']，它没有被加载。

谢谢。

4

1 回答 1

2

该System.import()调用返回一个 Promise，因此您需要将回调放入其then()方法中（第二个参数是父名称；不是回调）。

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

这将打印模块导出。

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

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您需要使用较新的 SystemJS0.20.*而不是0.19.*.

于 2017-03-31T10:15:18.230 回答