I want to minify my requirejs project by r.js -o app.build.js
After finishing it, the result breaks my website.
As the attached clip, you can see the page is keeping reloading itself and the console show the minified module reloaded again and again
https://www.youtube.com/watch?v=CQvWQ28nG1c&feature=youtu.be
Any idea?
<script type="text/javascript" src="http://mysite/js/require.js"
data-main="http://mysite/js/dist/app.out.js" defer async="true">
</script>
buggy page is here
http://www.foolpin.com/review/%E9%BB%83%E5%AE%89
app.build.js
{
name: "app.main.js",
mainConfigFile: 'app.main.js',
out: "dist/app.out.js",
optimize: "uglify2",
preserveLicenseComments: false,
generateSourceMaps: false,
optimizeAllPluginResources: false,
findNestedDependencies: false,
wrap: true,
wrapShim: true,
include: ["./require.js"],
}
app.main.js
requirejs.config({
paths: {
require: './require',
jquery: './vendor/js/jquery-2.1.1.min',
underscore: './vendor/js/underscore-min',
backbone: './vendor/js/backbone-min',
hbs: './vendor/js/hbs/hbs',
handlebars: './vendor/js/handlebars-v4.0.5',
},
hbs: { // optional
helpers: true, // default: true
templateExtension: 'hbs', // default: 'hbs'
partialsUrl: '' // default: ''
},
shim: {
handlebars: {
exports: 'Handlebars'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
underscore: {
exports: '_'
}
},
});
requirejs(["app_config", "app"],function(cfg, App, noop_ahoy){
return App.initialize();
});
update
I have multiple files some files has anoymous function for itself
Will it be the problem?
https://gist.github.com/poc7667/555a754a105a88cde13d
define([
...
"jquery"
],function(
The problem is caused by something that may be an easy mistake to do. When you use RequireJS you always load the bundle with the code that you supplied or something similar:
<script type="text/javascript" src="http://mysite/js/require.js"
data-main="http://mysite/js/dist/app.out.js" defer async="true">
</script>
The point being that you just have src="path/to/require.js and data-main="path/to/bundle.js". This is important.
Your mistake was including RequireJS in the bundle, and changing the script tag to something like
<script type="text/javascript" src="http://mysite/js/bundle.js"
data-main="http://mysite/js/bundle.js" defer async="true">
</script>
By some glitch in the Matrix, this causes a recursive loading of the same script over and over again, because somewhere inside bundle.js you require require, and it fetches bundle.js again and everything goes wild. That's the only thing I can think of. Your page as it stands now doesn't seem to use the bundled script anymore, so I can't verify this.
The solution is to not include RequireJS itself in the bundle. It's all there in the documentation.
Related
20% of the time, the scripts fail loading while using RequireJS.
The additional files that I am using throu the application require, besides the JS libraries, the base.js file, which contains configurations and some setup for underscore & backbone. Without these settings, the other files won't work.
The script tag in the is the following:
<script data-main="http://*path*/js/common" src="http://*path*/js/lib/require.js"></script>
The common.js file is
requirejs.config({
shim: {
underscore: {
exports: "_"
},
backbone: {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
base: {
deps: ["backbone"]
}
},
paths: {
jquery: [
'//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min',
'http://*path*/media/admin/js/lib/jquery.min'
],
base: 'http://*path*/media/admin/js/base',
backbone: 'http://*path*/media/admin/js/lib/backbone',
underscore: 'http://*path*/media/admin/js/lib/underscore'
}
});
The base.js file, with the settings for backbone, underscore and jQuery, contains:
define(['jquery', 'backbone', 'underscore'], function(jQuery, Backbone, _) {
//CODE
return var;
});
And the other files contain
define(['base'], function(var) {
//CODE
});
In the page I am loading the files using:
require(['common'], function() {
require(['page/file'], function() {
//CODE
});
});
What am I doing wrong, why jQuery, underscore and backbone fail loading sometimes and how can I fix this?
The error message is:
GET http://*host*/backbone.js 404 (Not Found) require.js:1
Uncaught Error: Script error for: backbone
http://requirejs.org/docs/errors.html#scripterror
I don't know that this is the only problem but this shim should be removed:
base: {
deps: ["backbone"]
}
You've shown a base.js file that calls define. The rule is simple: if your module calls define, then you use define to set dependencies, and the return value of the function you pass to define to set the value of your module; if your module does not call define, then you need a shim to set dependencies and determine the value of the module (if needed).
I would like to use requireJS. However, I have a lib that needs to be loaded before the DOM. However, this is not what happens with requireJS
<html>
<head>
<script data-main="/app" src="/require.js"></script>
</head>
<body>
<bar-foo/>
</body>
</html>
With app.js
require.config({
paths: {
'customElement': '/customElement',
'barfoo': '/barfoo'
},
shim: {
barfoo: {
deps: [ 'customElement' ]
}
}
});
define(['barfoo'], function() {
....
}
For example, if I simply load this script directly in the head (without requireJS) it works fine. Is there a require-config-option so I can load a specific file immediately (synchronously?) ?
Requirejs is known for it's asynchronous power. However when you need some sort of an order in which you want files to be loaded due to dependencies, in require.config there is a shim config:
shim: Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value.
So let's say you have a backbone app that depends on Underscore and jQuery, and you want them to load in that order then your would:
require.config({
paths: {
'Backbone': '/Backbone',
'Underscore': '/Underscore',
'jQuery': '/jQuery'
},
shim: {
'Backbone': [ 'Underscore', 'jQuery' ]
}
});
require(['Backbone'], function(Backbone){
//.....
});
So, RequireJS allows us to use the shim config to define the sequence of files which need to be loaded in correct order.
I'm implementing the search functionality described here for my Jekyll site but it needs six separate JavaScript files to work, so I'd like to use RequireJS to load all of these files as dependencies. Things are not working and the Error Console messages produce different results.
Webkit says Uncaught ReferenceError: Mustache is not defined. The file that's sending out the message jquery.lunr.search.js, which is the last JS file listed as a dependency.
Firefox and Opera return their respective versions of console errors for two separate files: SecondLevelDomains.js and IPv6.js.
Seeking an IE browser.
RE: getting Mustache and RequireJS to work together, there are lots of answers to this on SO but none of them seem to work for me in this instance. The current implementation of the site I'm using can be seen here.
A more visual representation of the code:
RequireJS reference in the HTML:
<script data-main="/js/config.js" src="/js/require.js" ></script>
Site structure
index.html
js
|__require.js
|__config.js
|__search.js
|__vendor
|__date.format.js
|__jquery.js
|__jquery.lunr.search.js
|__lunr.min.js
|__mustache.js
|__URI.min.js
config.js looks like this:
requirejs.config({
baseUrl: "/js",
deps: ["search"],
paths: {
jquery: "vendor/jquery",
lunr: "vendor/lunr.min",
mustache: "vendor/mustache",
dateFormat: "vendor/date.format",
uri: "vendor/URI.min",
LunrSearch: "vendor/jquery.lunr.search"
},
shim: {
jquery: {
exports: 'jquery'
},
lunr: {
exports: 'lunr'
},
'mustache': {
exports: 'Mustache'
},
dateFormat: {
exports: 'dateFormat'
},
uri: {
deps: ['jquery'],
exports: 'uri'
},
LunrSearch: {
deps: ['jquery', 'mustache'],
exports: 'LunrSearch'
}
}
});
And search.js (which should fire everything up) looks like this:
define("search", ["jquery", "lunr", "mustache", "uri", "dateFormat", "LunrSearch"],
function($, lunr, mustache, dateFormat, uri, LunrSearch) {
$('#search-query').lunrSearch({
indexUrl: '/search.json', // URL of the `search.json` index data for your site
results: '#search-results', // jQuery selector for the search results container
entries: '.entries', // jQuery selector for the element to contain the results list, must be a child of the results element above.
template: '#search-results-template' // jQuery selector for the Mustache.js template
});
});
Any ideas? Thanks!
Because I need important settings from the serverside I am required to put the main file in the HTML file. But my problem now is that the alias files still load, but are not available as variable. (Also not in the app.js file or in other defined files.) So when I do this: (See bottom of the HTML page)
require([
'jquery'
'app'
], function($, App) {
alert($);
App.initialize();
});
The alert will show a undefined variable, but when I look at my loaded files. The jQuery file is loaded. (The same problem with the underscore and backbone variable, but not the app variable, it is a problem with only the aliases.)
Do you know how to solve this problem?
<html>
<head>
<title>Domain.net</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/lib/modernizr.js"></script>
<script src="js/lib/require.js"></script>
<script type="text/javascript">
// Require.js allows us to configure shortcut alias
require.config({
baseUrl: "js",
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore',
backbone: 'lib/backbone',
templates: '../templates'
}
});
define('config', function() {
return {
/** My serverside config */
}
});
//Load the App
require([
'jquery',
'app'
], function($, App) {
alert($);
App.initialize();
});
</script>
I'm not sure what version of jQuery you are using, but if it is not 1.7 or higher, then it will not support amd by default, which would explain why you get undefined. The best solution in that case would be to update it.
Alternatively, try adding a shim with exports: jQuery to your config:
require.config({
baseUrl: "js",
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore',
backbone: 'lib/backbone',
templates: '../templates'
},
shim: {
jquery: {
exports: 'jQuery'
}
}
});
Also note that the way you are setting up your serverside config is prone to a race condition, see this answer.
Good afternoon,
I'm trying to optimize a source code based on Require.js and Backbone using r.js but I'm getting the following error during the compilation :
Tracing dependencies for: main
Cannot optimize network URL, skipping: empty:.js
TypeError: Cannot read property 'normalize' of undefined
In module tree:
main
app
router
views/main_panel/event_details
helpers/template_manager
My template_manager module does not try to access any 'normalize' property so I don't really understand what is that supposed to mean.
Here's the entry point to my application as well as the require.js configuration.
require.config({
paths: {
order: 'libs/requirejs-plugins/order',
text: 'libs/requirejs-plugins/text',
jQuery: 'libs/jquery/jquery',
Underscore: 'libs/underscore/underscore',
Backbone: 'libs/backbone/backbone',
templates: '../templates',
Sync: 'helpers/sync'
}
});
require([
'app',
'event_manager',
'order!https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
'order!libs/underscore/underscore-min',
'order!libs/backbone/backbone-min',
'helpers/objects_extension',
'helpers/date_extension',
'helpers/assets'
], function(App){
App.initialize();
});
The application itself more or less follows what's in this tutorial.
My app.build.js file is as follow
({
appDir: "../",
baseUrl: "js",
dir: "../app-build",
modules: [
{
name: "main"
}
],
paths: {
order: 'empty:',
text: 'empty:',
jQuery: 'empty:',
Underscore: 'empty:',
Backbone: 'empty:',
templates: '../templates',
Sync: 'helpers/sync'
}
})
Thank you for your help.
James Burke says:
The text plugin needs be loaded by the loader for it to process text! depenencies. Loader plugins are executed as part of a build to resolve their resources.
So it should be enough to remove the text: "empty:" from the paths config, and just leave the excludes: in so it is not included in the final build result. This assumes you have text.js available locally to be read by the optimizer.
https://github.com/jrburke/r.js/issues/221