I'm using RequireJS to load some modules.
I'm serving static assets using a mirror CDN. The problem is that modules are loaded relatively to the website domain and not to the data-main file, so that modules are loaded this way:
my-website.com/
↳ cdn.com/assets/js/require-main.min.js
↳ my-website.com/assets/js/helper-module.js
↳ my-website.com/assets/js/utility-module.js
Is there a way to load modules relatively to the data-main file, in order to serve modules using the CDN?
my-website.com/
↳ cdn.com/assets/js/require-main.min.js
↳ cdn.com/assets/js/helper-module.js
↳ cdn.com/assets/js/utility-module.js
I can't hard-code the CDN domain anywhere since it is not always the same.
This is a sample of require-main.js
requirejs.config({
baseUrl: "../js/",
waitSeconds: 15,
paths: {
helper: "helper-module",
...
}
});
and this is the rjs.optimize function I use to minify all the assets and combine some modules
rjs.optimize({
appDir: './assets/js/',
baseUrl: ".",
mainConfigFile: './assets/js/require-main.js',
dir: './public/assets/js/',
preserveLicenseComments: true,
optimize: 'uglify2',
findNestedDependencies: true,
logLevel: 0,
uglify2: {
mangle: false
},
modules: [
{
name: 'require-main'
...
}
],
removeCombined: true,
writeBuildTxt: false
});
In the production (when you desire to serve using CDN), supply the baseUrl to be the CDN domain domain. requirejs optimizer outputs the configurations realtive to the appDir. If you are loading files from the CDN then you may have to change the baseUrl value to be the CDN URL.
require.config({
baseUrl : "https://yourcdn.com",
paths : {
module1: 'path/to/module1',
module2: 'path/to/module2'
},
bundles: {
bundle1 : ['moduleA', 'moduleB']
}
})
Be sure to read this too if your modules depend on third party AMD modules
http://requirejs.org/docs/optimization.html#empty
As it seems you are using bundles, use the bundlesConfigOutFile property to write the bundled configuration into a file, so that you need not write the configuration manually.
For more : https://github.com/requirejs/r.js/blob/master/build/example.build.js
You can change the baseUrl value in the r.js callback.
Related
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.
In my application, I want to have an environment config that uses a different version name for every deploy so that the application is properly cache busted and users don't have stale versions of code in their browser cache. Note I have been following this guide.
Thus, in main.js, before I do anything, I call require.config with a generic config that uses the current date/time to bust the cache on the environment config file, then after the environment config is loaded, I use the environment "config.version" as part of the urlArgs to guarantee that the newly deployed code is included and not a stale version. Note that the object from the config file has other properties that will be used throughout the application as well (e.g. google analytics account number).
It seems that my r.js build file is fine if I remove the first require.config that allows me to setup the environment/config dependency, but when I add it back in, the infrastructure JS module that I'm using to group third-party scripts chokes saying it can't find my underscore lib (or any lib I include in there for that matter). Note that even if I don't include environment/config and just make the two require.config calls, the same error results. Is there a reason two require.config calls would cause this error? Thanks for any help.
//Error:
Error: ENOENT, no such file or directory '<%root_folder%>\dist\js\underscore.js'
In module tree:
infrastructure
My main JS file
//main.js
require.config({
baseUrl: "js",
waitSeconds: 0,
urlArgs: "bustCache=" + (new Date).getTime()
});
require(["environment/config"], function(config) {
"use strict";
require.config({
urlArgs: "bustCache=" + config.version,
baseUrl: "js",
waitSeconds: 0,
paths: {
underscore: "lib/lodash.underscore-2.4.1-min",
},
shim: {
"underscore":{
exports : "_"
}
}
});
//commented out, b/c not needed to produce the error
//require(["jquery", "infrastructure"], function($) {
//$(function() {
//require(["app/main"], function(app) {
//app.initialize();
//})
//});
//});
});
And here's the build file...
//build file
({
mainConfigFile : "js/main.js",
appDir: "./",
baseUrl: "js",
removeCombined: true,
findNestedDependencies: true,
dir: "dist",
optimizeCss: "standard",
modules: [
{
name: "main",
exclude: [
"infrastructure"
]
},
{
name: "infrastructure"
}
],
paths: {
"cdn-jquery": "empty:",
"jquery":"empty:",
"bootstrap.min": "empty:"
}
})
Here infrastructure.js
define(["underscore"], function(){});
config file (will have more keys like google analytics account number and other environment specific info.)
//config.js
define({version:"VERSION-XXXX", cdn: { jquery: "//path-to-jquery-1.11.0.min" }});
command I'm running: "r.js -o build.js"
Ok, yes, it is a problem with the two require.config calls. At runtime, there is absolutely no problem calling config multiple times. However, at build time, r.js is not able to follow the calls. So if your build depends on any later call to require.config you are going to have problems.
I see that your second call to require.config does not contain any value that is computed on the basis of what is loaded after the first call, except for urlArgs so you could move everything from that second call into the first one, except for urlArgs.
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 would like to use Grunt to build a Durandal project, because Weyland remains completely undocumented and isn't as standard as Grunt.
To do this, the grunt task needs to pull in all the js and html files during optimization, but I am unable to get RequireJS to inline the html files via the text module.
It looks like weyland copies the text files manually, but I can't figure out what it's doing to get requirejs (or almond, in this case), to actually use them. I have seeen this question, but it requires the text modules to be referenced in the define call, which isn't done in Durandal.
My gruntfile for require uses this config
requirejs: {
build: {
options: {
name: '../lib/require/almond-custom', //to deploy with require.js, use the build's name here instead
insertRequire: ['main'], //needed for almond, not require
baseUrl: 'src/client/app',
out: 'build/main-built.js',
mainConfigFile: 'src/client/app/main.js', //needed for almond, not require
wrap: true, //needed for almond, not require
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout-2.3.0',
'bootstrap': '../lib/bootstrap.min',
'jquery': '../lib/jquery-1.9.1',
'Q' : '../lib/q.min'
},
inlineText: true,
optimize: 'none',
stubModules: ['text']
}
}
}
You might want to give https://npmjs.org/package/grunt-durandal a try. I'm using this as part of a grunt based build process. See https://github.com/RainerAtSpirit/HTMLStarterKitPro for an example.
durandal: {
main: {
src: ['app/**/*.*', 'lib/durandal/**/*.js'],
options: {
name: '../lib/require/almond-custom',
baseUrl: requireConfig.baseUrl,
mainPath: 'app/main',
paths: mixIn({}, requireConfig.paths, { 'almond': '../lib/require/almond-custom.js' }),
exclude: [],
optimize: 'none',
out: 'build/app/main.js'
}
}
},
As a possible alternative to Grunt I would suggest looking at Mimosa. It's not as widely used as Grunt but is well documented and requires a good deal less configuration and if you start with the durandal skeleton everything is configured for you including inlining html.
Durandal also recommends it and tells you how to get started with it: http://durandaljs.com/pages/get-started/
You can run make start to start developing and make dist to have it package everything up for release.
I've got some paths configured in require-config.js as follows:
var require = {
baseUrl: '/javascript',
paths: {
'jquery': 'jquery/jquery-1.8.1.min'
// etc. -- several paths to vendor files here
},
}
I am trying to get the optimization working for deployment. The docs say I should have a build.js that looks something like this:
({
baseUrl: 'javascript',
paths: {
'jquery': 'jquery/jquery-1.8.1.min'
},
name: 'main',
out: 'main-build.js'
})
Is there a way to have the optimizer read my config file instead of (or in addition to) build.js? I don't want to have to manually keep the paths configured the same in both files if they change.
I tried to just run node r.js -o path/to/require-config.js, but it threw an error, "malformed: SyntaxError: Unexpected token var"
Edit: for clarification, my require-config.js file is the config only, not my main module. I did this so I could use the same configuration but load a different main module when unit testing.
You'll need to adjust the way your config options are defined. Taken from the RequireJS documentation:
In version 1.0.5+ of the optimizer, the mainConfigFile option can be used to specify the location of the runtime config. If specified with the path to your main JS file, the first requirejs({}), requirejs.config({}), require({}), or require.config({}) found in that file will be parsed out and used as part of the configuration options passed to the optimizer:
So basically you can point your r.js build file to your config options that will also be shared with the browser.
You will need to make use of the mainConfigFile option
For other's reference:
https://github.com/jrburke/r.js/blob/master/build/example.build.js
The build settings (no need to repeat your config.js lib inclusions here):
baseUrl: 'app',
name: 'assets/js/lib/almond', // or require
// Read config and then also build it into the app
mainConfigFile: 'app/config.js',
include: ['config'],
// Needed for almond (and does no harm for require)
wrap: true,