如何填充依赖于全局 jQuery 和 lodash 的非 CommonJS、非 AMD 包？答案

【问题标题】：How do I shim a non CommonJS, non AMD package which depends on global jQuery & lodash?如何填充依赖于全局 jQuery 和 lodash 的非 CommonJS、非 AMD 包？
【发布时间】：2015-06-13 13:22:20
【问题描述】：

我是第一次使用 jspm，已经遇到了障碍。

我需要弄清楚如何“填充”我们公司私有 npm 注册表中的专有脚本。

包裹：widget

驻留在私有 npm 注册表中
不是 CommonJS、UMD/AMD 模块
取决于lodash 和jquery，但假定它们存在于全局范围内
在全局范围内公开Widget

这是（假设的）代码

var Widget = {
  render: function(el, symbol) {
    symbol = _.trim(symbol);
    $(el).text(symbol);
  }
};

app.js

var widget = require("Widget");
widget.render(document.getElementById("name"), " Fred ");

index.html

<body>
  <div id="name"></div>

  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
  <script>
    System.import("app");
  </script>
</body>

当我在本地 Web 服务器中运行此页面时，我收到一个错误：

未捕获的引用：_ 未定义

如何为widget 提供“垫片”？

【问题讨论】：

喜欢this?

标签： jspm systemjs

【解决方案1】：

您最好的选择是，如果您可以更新 Widget 包的 package.json，您可以告诉 JSPM 它需要一个 shim：

{
  "shim": {
    "widget": { "deps": ["jquery", "lodash"] }
  }
}

（其中“widget”是包内的模块名称。）

如果由于某种原因您不能直接接触该 npm 包，那么您可以在 jspm 安装时覆盖 shim 信息：

jspm install widget -o "{ shim: { 'widget': { deps: ['jquery', 'lodash'] } } }"

（同样，“widget”是模块名称，在包本身内部是本地的。）

【讨论】：

此方法适用于 jquery 依赖项，因为从 jspm 注册表引用的 jquery 包执行全局导出。但是 lodash 别名引用 npm:lodash 并且这个特定的包不会导出全局。所以我的解决方法是从我的主模块导入 lodash 并在窗口中手动导出它。我在 systemjs 中看到了针对此特定问题的票证：github.com/jspm/registry/issues/431