optimizing scripts by using requirejs with loading jquery from cdn

Question

main.js below

requirejs.config({
    baseUrl: ".",
    shim: {
        p: ['jquery']
    },
    paths: {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
        'p': 'p'
    }
});

require(['jquery', 'c'], function ($) {
    console.log($)
});

c.js below

define(['p'], function () {
    return {};
});

build.js below

({
    baseUrl: ".",
    name: "main",
    out: "main-built.js",
    optimize: "none",
    mainConfigFile: 'main.js'

})

p.js

$('body').html('p!');

Build command:

node path/to/r.js -o ./build.js

This is my index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<script src="../app/libs/requirejs/require.js" data-main="main-built"></script>

</body>
</html>

And I got the error when tried to open this file:

Uncaught ReferenceError: $ is not defined

Is it possible to fix this problem?

Thanks!

UDP1: I added this to build.js, but it doesn't work

paths: {
        jquery: "empty:"
    }

After you add the paths config, does it fail in exactly the same way as before? Also, are you sure that you are using the new version of your built file? If you are testing using a browser that loads files right off your local filesystem you can run into caching issues. (Clearing your cache ensures you're loading the latest files.) — Louis
Yes, it fail exactly the same way as before. I used 2.1.9 version of r.js and requirejs. I used nginx for local http server and I cleared the browser cache. — Alexey Sh.

Louis Louis · Accepted Answer · 2013-12-06T12:24:21

Use an "empty:" path in your build config:

({
    baseUrl: ".",
    name: "main",
    out: "main-built.js",
    optimize: "none",
    mainConfigFile: 'main.js',
    paths: {
        jquery: "empty:"
    }
})

optimizing scripts by using requirejs with loading jquery from cdn

1 Answers