How do I shim a non CommonJS, non AMD package which depends on global jQuery & lodash?

三世轮回 提交于 2019-12-23 12:39:05

问题


I am using jspm for the first time and already ran into a snag.

I need to figure out how to "shim" a proprietary script which lives on our company's private npm registry.

Package: widget

  • Resides on private npm registry
  • Is not a CommonJS, UMD/AMD module
  • Depends on lodash and jquery, but assumes they exist on global scope
  • Exposes Widget on the global scope

Here's the (hypothetical) code

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>

When I run this page in a local web server, I get an error:

Uncaught Reference: _ is not defined

How can I provide a "shim" for widget?


回答1:


Your best bet is that if you can update the package.json for the Widget package you can tell JSPM it needs a shim there:

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

(Where "widget" is the module name inside the package.)

If for some reason you can't directly touch that npm package, then you can override the shim information when you jspm install it:

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

(Again, where 'widget' is the module name, as local to inside the package itself.)



来源:https://stackoverflow.com/questions/29517124/how-do-i-shim-a-non-commonjs-non-amd-package-which-depends-on-global-jquery-l

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!