How do I load third party JavaScript from a CDN when using RequireJS?

SoftMemes picture SoftMemes · Mar 18, 2012 · Viewed 22.5k times · Source

I've been using RequireJS for dependency management and must say that I love it - JavaScript has really matured recently.

However, one thing I cannot figure out is this: When using the optimizer to bundle all my JavaScript modules into one file, how can I keep loading some thirt party scripts (such as jquery) from an external CDN URL instead of having to bundle it with my application code?

Answer

Paul Grime picture Paul Grime · Mar 19, 2012

This will load jQuery from a CDN:

<script src="http://requirejs.org/docs/release/2.1.5/comments/require.js"></script>
<script type="text/javascript">
  require.config({
    paths: {
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min"
    },
    waitSeconds: 40
  });
</script>

<div id="message">hello</div>

<script type="text/javascript">
  require( ["jquery"],
    function ($) {
      alert($.fn.jquery + "\n" + $("#message").text());
    }
  );
</script>

Fiddle Here.

This page from the requirejs docs shows how to eliminate a path from the optimised build. Basically use the empty: scheme. Excerpt here:

node ../../r.js -o name=main out=main-built.js baseUrl=. paths.jquery=empty: