I'm trying to build my require.js modules to one javascript file for production.
The command I'm running is...
r.js -o name=main out=main.min.js mainConfigFile=main.js
This compiles but the compiled main.min.js file is not compiled correctly and still includes the "define" statement blocks. and the browser obviously returns
Uncaught ReferenceError: define is not defined
My main.js file looks like:
require.config({
paths: {
jquery: 'libs/jquery/jquery',
},
shim: {
bootstrap: {
deps: ['jquery'],
exports: 'jquery'
}
}
});
require(['app', 'jquery'], function (app, $) {
'use strict';
// use app here
console.log(app);
console.log('Running jQuery %s', $().jquery);
});
Please let me know what I'm overlooking here.
Thanks!
You're correct, you need to include requireJS in your build. Take a look at http://requirejs.org/docs/optimization.html#onejs. You'll find an example for the command line there. If you're using a build profile it will look something like this -
({
baseUrl: "../Scripts",
paths: {
requireLib: 'libs/require'
},
name: "main",
out: "main-built.js",
include: ["requireLib"]
})
Quick fix: use r.js -o build.js instead of node r.js -o build.js
I had the problem when I was trying to call r.js through node:
node r.js -o build.js
Calling r.js directly fixed the problem:
r.js -o build.js
Note: r.js was installed globally with npm install -g requirejs
Related
On the plugin's github page there is the following explanation to implement the plugin via AMD loader:
define([ "jquery", "plugins/jquery.panzoom" ], function( $ ) {
$(document).ready(function() {
$(".panzoom-elements").panzoom();
});
});
But how do I implement this plugin via nodejs & browserify?
This plugin uses UMD (Universal Module Definition) pattern, meaning you could use it also with CommonJS/Browserify module system as usual like any other lib/package.
(See: these lines of source code).
Installation:
npm install jquery.panzoom --save
Usage:
main.js
var $ = require('jquery');
require('jquery.panzoom');
$(document).ready(function() {
$(".panzoom-elements").panzoom();
});
Browserify:
browserify main.js -o bundle.js
Have require js working fine without the bundles. But whenever i use a bundle, i get timeouts for the modules i am trying to import.
Here is how i build the bundles with the asp.net mvc bundler/minifier
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/jquery-{version}.js",
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
bundles.EnableOptimizations = true;
Heres is the require js config in the cshtml file:
<script>
require.config({
baseUrl: "/scripts",
paths: {
jquery: "jquery-1.11.2"
},
waitSeconds: 20,
shim: {
bootstrap: {
deps: ['jquery']
}
},
bundles: {
'#Scripts.Url("~/bundles/test").ToString()': [
'jquery',
'bootstrap',
'moment'
]
}
});
require(["app/main/test"]);
</script>
And the js for the page (app/main/test):
require(['jquery', 'moment'], function ($, moment) {
console.log(moment().format());
});
Jquery, bootstrap and moment libraries are in the test bundle i have created, but i get load timeouts loading the page for moment.
Here's the chrome inspector error:
Any ideas?
thanks in advance.
This is happening because you are not requiring your bundle at all. Your require call has only jquery and moment. You have provided jquery file path, so requirejs uses that path to download and provide jquery module. But since there is no path definition for moment, it is only part of the bundle that you have created. So requirejs tries downloading moment by its module name as path and thus throws an error.
A simple fix for this is to require bundle itself.
require(['#Scripts.Url("~/bundles/test").ToString()'], function(bundle){
//At this point jquery, moment and bootstrap will be loaded.
});
You can choose to use jQuery, moment from global namespace in above example directly or you can try requiring them seperately in below example. I am not sure, but you may get into error with below example because of cyclic dependency.
require(['#Scripts.Url("~/bundles/test").ToString()', 'jquery', 'moment'], function(bundle, $, moment){
//At this point jquery, moment and bootstrap will be loaded.
});
Just remove 'jquery' from your bundles
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
...
bundles: {
'#Scripts.Url("~/bundles/test").ToString()': [
'bootstrap',
'moment'
]
}
...
You already have it specified in the paths
paths: {
jquery: "jquery-1.11.2"
},
It seems require.js maps the modules to bundles so that once a module that is part of a bundle is loaded, that bundle is not loaded again.
Getting mighty tired fighting to get requireJS to work in a predictable manner. Its debugging support is underwhelming.
My config.js file as follows:
require.config({
baseUrl: "Scripts",
paths: {
"jquery": "jquery-2.1.1.min",
"bootstrap": "bootstrap.min",
"knockout": "knockout-3.1.0"
},
shim: {
"bootstrap": {
deps: ["jquery"],
exports: "$.fn.popover"
}
},
enforceDefine: true
});
require(["jquery", "bootstrap"], function ($, bootstrap) {
console.log("(A) loaded jq + bs");
if ($)
console.log("$ is present");
if (bootstrap)
console.log("bootstrap is present");
});
//# sourceMappingURL=Config.js.map
JavaScript in the /Scripts folder, which is where Config.js resides. 'jquery' is supposed to alias to a specific version, but when the browser loads it tries to load /Scripts/jquery.js
The aliased file /Scripts/jquery-2.1.1.min.js exists.
The same happens with bootstrap - it loads boostrap.js instead of bootstrap.min.js
I hate the way requireJS has this arcane way of mixing different behaviours into the same path setting, which changes based on string contents.
This link may help you.. the configuration file is being loaded asynchronously and has not been executed when you first call require()
Check this one
Require JS is ignoring my config
I am getting an error:
"Error: Load timeout for modules"
While trying to include a module with dependencies.
Am I doing this incorrectly?
My bootstrap:
requirejs.config({
baseUrl: "js",
paths: {
JqueryUiLatest: "jquery-ui-1.10.1.custom",
}
});
require([
'modules/outlookPopupModule'
], function(OutlookPopupModule){
...
});
My module:
define([
'jquery',
"JqueryUiLatest"
], function ($, JqueryUI) {
it seems to work if I replace "JqueryUiLatest" with the actual file "jquery-ui-1.10.1.custom" in the module, but this seems to defeat the purpose of being able to use the config.
I'm sure I'm doing something wrong here?
By my experience requirejs often fails with timeout when shim dependency module is a plain JS script, not wrapped AMD module. The only solution I have now - load such files manually prior to requirejs or load them explicitly in require/define calls by full name (including .js extensions). In require/define no timeout occurs.
I installed three.js with bower install threejs.
Then after this I wish to have three.js in my page, so my app.js file starts with:
define(["jquery", "three"], function() {
"use strict";
However when my page loads the Chrome console shows:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/scripts/three.js
Uncaught Error: Script error
Well, shouldn't it be looking in components like it does for jQuery?
Basically how can I get started with yeoman and installing three.js?
Solution is as follows.
The app.js file needs to refer to "three" as above and this refers to the file main.js which has the following.
require.config({
paths: {
jquery: '../components/jquery/jquery',
three: '../components/threejs/build/three'
},
shim: {
bootstrap: {
deps: ['jquery'],
exports: 'jquery'
}
}
});
The key here is the three which points where threejs three.js file is located.