使用 SystemJS 和 JQuery 依赖项导入全局 JS 文件

Question

仅出于测试目的，我尝试使用 SystemJS

从 Zurb Foundation 导入以下 javascript 文件

http://foundation.zurb.com/sites/docs/assets/js/docs.js 此脚本需要 JQuery.

我的 config.js 文件包含以下内容：

meta: {
    "zurbDocs": {
      "scriptLoad": true,
      "format": "global",
      "exports": "zurbDocs",
      "deps": [
        "jquery"
      ]
    }
  },

map: {
...
    "jquery": "npm:jquery@2.2.4",
    "zurbDocs": "http://foundation.zurb.com/sites/docs/assets/js/docs.js",
...

然后我尝试导入

import 'zurbDocs';

但是抛出一个错误：

Uncaught ReferenceError: $ is not defined(…)

这来自 doc.js 文件，当它使用 jQuery 的 $ 符号时在第 3215 行 - $('[data-docs-code]').each(function(index, value) { 我做错了什么？

Answer 1

不幸的是，"scriptLoad": true 与 deps 的兼容性似乎非常有限。

SystemJS 通常的工作方式是获取一个模块，发现它的依赖项（通过扫描源代码寻找 import 语句或 require 调用），然后获取它的依赖项等等，然后 "link" 模块，这涉及按照依赖项确定的正确顺序执行它们。

这里的假设是获取模块的顺序不受它们的依赖关系的影响。

当 scriptLoad 为真时，该假设不成立，因为当您使用 <script> 标记时，无法获取全局模块，但无法执行它。

你可以用一个依赖于另一个 b.js 的全局脚本 a.js 做一个非常简单的测试，如果你观察网络流量你会看到 systemjs 总是在获取 a 之前b，无论任何配置设置如何。

如果全局模块不尝试立即使用它的依赖项，而是创建一些全局变量或函数，您稍后可以调用它们来完成工作，这并不重要 - 一切都会在您调用函数时解决由模块提供。

不幸的是，zurb 文档并非如此，当您使用 <script> 标签加载它时，它会立即尝试使用 jQuery 执行某些操作。

使用 SystemJS 和 JQuery 依赖项导入全局 JS 文件

Importing global JS File with SystemJS and JQuery Dependancy

systemjs