Develop Reference

'define' is not defined error on RequireJS & Webapp Yo generator

I have struggled a few days to figure this out,, but finally I need your help today.
my repo: https://github.com/seoyoochan/bitsnut-web
what I want to achieve:
- Load and optimize r.js
- Write bower tasks for RequireJS and r.js :
tasks are: minify & uglify & concatenation for RequireJS, and optimise with r.js on production
- How to exclude js script tags in index.html when using wiredep tasks and load them through RequireJS loader?
I use Yeoman 'Webapp' generator and generated the scaffold app.
I installed backbone, marionette, text, underscore, and etc via bower install
I modified bower.json by removing dependencies and left only "requirejs": "~2.1.16" on dependencies. (devDependencies is empty)
because I use [2][grunt-wiredep], everything is automatically loaded bower_components into index.html.
I modified .bowerrc to store dependencies at app/scripts/vendor.
However, the problem is that I don't know how to successfully load them through ReuqireJS and not to load the vendors as script tags inside index.html.
I have to write some tasks for RequireJS and r.js, but don't know how to achieve this goal ( I installed grunt-contrib-requirejs though )
I want to follow the 4th method to make use of r.js at https://github.com/jrburke/requirejs/wiki/Patterns-for-separating-config-from-the-main-module. but the issue I encountered was that RequireJS's documentation does suggest to not use named module, but anonymous module.
I would like to hear various opinions about how I should approach.
I really appreciate your help in advance!

You load your scripts manually here and here, rendering the whole point of requireJS useless. You also load main first here config.js#L49.
Instead, you should only have this line in your index.html
<script data-main="scripts/config" src="scripts/vendor/requirejs/require.js"></script>
And load all your dependencies in that file (like you do with main) using define() and require(). As you have set exports, which sets the values as globals, the functions can be empty. Here's an sample:
define([
"jquery",
"underscore",
"backbone",
"marionette",
"modernizr"
], function () {
require([
"backbone.babysitter",
"backbone.wreqr",
"text",
"semantic"
], function () {
/* plugins ready */
});
define(["main"], function (App) {
App.start();
});
});
Also the baseUrl is the same as the directory as your data-main attributes folder (http://requirejs.org/docs/api.html#jsfiles):
RequireJS loads all code relative to a baseUrl. The baseUrl is
normally set to the same directory as the script used in a data-main
attribute for the top level script to load for a page. The data-main
attribute is a special attribute that require.js will check to start
script loading.
So I think your baseUrl in config.js points to scripts/scripts/-folder which doesn't exist. It could/should be vendor/ instead (and remove the vendor part from all of the declarations) or just left empty.
Instead of wiredep, you could try using https://github.com/yeoman/grunt-bower-requirejs which does similar things to wiredep but specially for bower/requirejs apps (see: https://github.com/stephenplusplus/grunt-wiredep/issues/7)
Your repo doens't include the dist-folder for jQuery, but otherwise here's a working sample of config.js: http://jsfiddle.net/petetnt/z6Levh6r/
As for the module-definition, it should be
require(["dependency1", "dependency2"])
and the module should return itself. Currently your main file sets itself as a dependency
require(["main", "backbone", "marionette"], function(App, Backbone, Marionette){
As you already set the backbone and marionette as globals with exports, you can again set the function attributes empty, so your main file should look like this:
require(["backbone", "marionette"], function(){
"use strict";
var App = new Backbone.Marionette.Application();
App.addInitializer(function(){
console.log("hello world!");
Backbone.history.start();
});
return App;
});
And as you already use define to load main, don't require it again. Instead just call App.start() inside the define function.
https://jsfiddle.net/66brptd2/ (config.js)

How to use same config file for serving modules with requirejs and using r.js on the server side to concatenate and minify?

I am working on a project that uses requirejs to dynamically load modules from a web browser. Some of the modules are vendor files, e.g. jQuery, which are all installed into a folder /project/root/lib/ via bower. This project's modules are located in a folder /project/root/components/. So I have a requirejs config, components/main.js, that looks something like this:
requirejs.config({
baseUrl: '/components',
paths: {
jquery: '/lib/jquery/jquery',
}
});
This way, when a vendor module is requested, require finds it by using the mappings defined in paths, while all other modules are located relative to components.
I also want to use r.js to perform concatenation and minification and reduce all javascript files to simply app.js for use in production. I was able to successfully perform this task with r.js -o build.js. Here is what build.js looks like:
({
baseUrl:'components',
out: 'js/app.js',
name: 'app',
paths: {
jquery: '../lib/jquery/jquery'
}
})
However, because there are dozens of vendor file paths defined in my require.js config (main.js), I don't want to have to replicate the configuration across two different files. I would rather use a single config file. The problem is that the paths defined in main.js are absolute (/lib/..., /components), because they're URL paths, but the paths in build.js need to be relative (../lib/..., ./components), because they're filesystem paths. Is there a way to reconcile these differences and define the paths only in main.js, which I then I load in using mainConfigFile in build.js? I tried using the require config called map in build.js, but this method required that I defined a new mapping for each module, which is just as bad as re-defining all of the paths. I want a blanket mapping, essentially.
Is there a method to consolidate my config files to avoid duplicate path definitions?

There is nothing that requires using absolute paths in the configuration passed to RequireJS. RequireJS interprets paths that are relative using baseUrl as the starting point so this should work:
requirejs.config({
baseUrl: '/components',
paths: {
jquery: '../lib/jquery/jquery',
}
});
RequireJS will perform the final path computation for jquery by merging /components with ../lib/jquery/jquery, which resolves to /lib/jquery/jquery, which is exactly the same as the absolute path that was there originally.

using requirejs optimizer to minify to a single javascript and single css

I am writing jQuery plugin and using requirejs in order to make my plugin modular and easier to code.
The plugin has also its own css files. Now, I want to combine and minify all the js files and css files. I am using r.js to so it. Here is the build.js configuration file that knows how to concatenate and minify js files into one file:
({
baseUrl: 'js/plugin',
optimize: 'none', // none, uglify or uglify2
wrap: true,
name: '../vendor/almond',
include: 'main',
out: '../dist/jquery.my-plugin.min.js'
})
How can I add an option to minify also css file? I saw the cssIn option, but where do I tells r.js wha is the output name? Do I need to use modules? If so, how?

r.js automatically inlines contents of #import url(...) links in all .css files found in the project directory (thus concatenating multiple files into one master stylesheet).
In your current build configuration, however, with only baseUrl specified, r.js doesn't even know about the CSS folder (which is, presumably, somewhere in ../../style/ relative to js/plugin/).
You'd have to add the appDir and dir properties to your buildconfig file (both explained in detail in the example config file) and set project root (ie. appDir) to directory that contains both JS and CSS folders.
Please note that, as mentioned in the documentation, adding appDir will require changing value of baseUrl to be relative to appDir.

How to use RequireJS build profile + r.js in a multi-page project

I am currently learning RequireJS fundamentals and have some questions regarding a build profile, main files, and use of RequireJS with multi-page projects.
My project's directory structure is as follows:
httpdocs_siteroot/
app/
php files...
media/
css/
css files...
js/
libs/
jquery.js
require.js
mustache.js
mains/
main.page1.js
main.page2.js
main.page3.js
plugins/
jquery.plugin1.js
jquery.plugin2.js
jquery.plugin3.js
utils/
util1.js
util2.js
images/
Since this project is not a single-page app, I have a separate main file for each page (although some pages use the same main file).
My questions are:
Is RequireJS even practical for projects that are not single-page?
Without using the optimizer, each of my main files start with essentially the same config options:
requirejs.config({
paths: {
'jquery': 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'
},
baseUrl: '/media/js/',
// etc...
});
require(['deps'], function() { /* main code */ });
Is there a way to avoid this? Like having each main file include the same build profile without having to actually build it?
Should r.js go in httpdocs_siteroot's parent directory?
Is there something glaringly wrong with my app dir structure or my use of RequireJS?

First of all, this is not a question with a unique solution. I'll explain the way I use RequireJS that works for me, and may work for you :)
Second, English is not my mother language. Corrections and tips about the language will be very appreciated. Feel free, guys :)
1) Is require js even practical for projects that are not single-page?
It depends. If your project does not have shared code between pages for example, RequireJS help will be modest. The main idea of RequireJS is modularize the application into chunks of reusable code. If your application uses only page-specific code, then using RequireJS may not be a good idea.
2) Without using the optimizer, each of my main files start with essentially the same config options. Is there a way to avoid this? Like having each main file include the same build profile without having to actually build it?
The only way I see is making the configuration on the main file, or create a module that will configure RequireJS and then use that module as the first dependency on main.js. But this can be tricky. I do not use many main.js files in my applications; I use only one that acts as a loader (see below).
3) Should r.js go in httpdocs_siteroot's parent directory?
Not necessarily. You can put it inside the /media directory, since all your client stuff is there.
4) Is there something glaringly wrong with my app dir structure or my use of requirejs?
I would not say that. On the other hand, the structure is perhaps a bit too fragmented. For example, you can put all '3rd party stuff' inside a /vendor directory. But this is just sugar; your structure will work well and seems right. I think the major problem is the requirejs.config() call in multiple main files.
I had the same problems you are having now and I ended up with the following solution:
1) Do not wrap the non-AMD-compliant files with a define. Although it works, you can achieve the same results using the "shim" property in requirejs.config (see below).
2) In a multi-page application, the solution for me is not to require the page-specific modules from the optimized main.js file. Instead, I require all the shared code (3rd party and my own) from the main file, leaving the page-specific code to load on each page. The main file ends up only being a loader that starts the page-specific code after loading all shared/lib files.
This is the boilerplate I use to build a multi-page application with requirejs
Directory structure:
/src - I put all the client stuff inside a src directory, so I can run the optimizer inside this directory (this is your media directory).
/src/vendor - Here I place all 3rd party files and plugins, including require.js.
/src/lib - Here I place all my own code that is shared by the entire application or by some pages. In other words, modules that are not page-specific.
/src/page-module-xx - And then, I create one directory for each page that I have. This is not a strict rule.
/src/main.js: This is the only main file for the entire application. It will:
configure RequireJS, including shims
load shared libraries/modules
load the page-specific main module
This is an example of a requirejs.config call:
requirejs.config({
baseUrl: ".",
paths: {
// libraries path
"json": "vendor/json2",
"jquery": "vendor/jquery",
"somejqueryplugion": "vendor/jquery.somejqueryplufin",
"hogan": "vendor/hogan",
// require plugins
"templ": "vendor/require.hogan",
"text": "vendor/require.text"
},
// The shim section allows you to specify
// dependencies between non AMD compliant files.
// For example, "somejqueryplugin" must be loaded after "jquery".
// The 'exports' attribute tells RequireJS what global variable
// it must assign as the module value for each shim.
// For example: By using the configutation below for jquery,
// when you request the "jquery" module, RequireJS will
// give the value of global "$" (this value will be cached, so it is
// ok to modify/delete the global '$' after all plugins are loaded.
shim: {
"jquery": { exports: "$" },
"util": { exports: "_" },
"json": { exports: "JSON" },
"somejqueryplugin": { exports: "$", deps: ["jquery"] }
}
});
And then, after configuration we can make the first require() request
for all those libraries and after that do the request for our "page main" module.
//libs
require([
"templ", //require plugins
"text",
"json", //3rd libraries
"jquery",
"hogan",
"lib/util" // app lib modules
],
function () {
var $ = require("jquery"),
// the start module is defined on the same script tag of data-main.
// example: <script data-main="main.js" data-start="pagemodule/main" src="vendor/require.js"/>
startModuleName = $("script[data-main][data-start]").attr("data-start");
if (startModuleName) {
require([startModuleName], function (startModule) {
$(function(){
var fn = $.isFunction(startModule) ? startModule : startModule.init;
if (fn) { fn(); }
});
});
}
});
As you can see in the body of the require() above, we're expecting another attribute on the require.js script tag. The data-start attribute will hold the name of the module for the current page.
Thus, on the HTML page we must add this extra attribute:
<script data-main="main" data-start="pagemodule/main" src="vendor/require.js"></script>
By doing this, we will end up with an optimized main.js that contains all the files in "/vendor" and "/lib" directories (the shared resources), but not the page-specific scripts/modules, as they are not hard-coded in the main.js as dependencies. The page-specific modules will be loaded separately on each page of the application.
The "page main" module should return a function() that will be executed by the "app main" above.
define(function(require, exports, module) {
var util = require("lib/util");
return function() {
console.log("initializing page xyz module");
};
});
EDIT
Here is example of how you can use build profile to optimize the page-specific modules that have more than one file.
For example, let's say we have the following page module:
/page1/main.js
/page1/dep1.js
/page1/dep2.js
If we do not optimize this module, then the browser will make 3 requests, one for each script.
We can avoid this by instructing r.js to create a package and include these 3 files.
On the "modules" attribute of the build profile:
...
"modules": [
{
name: "main" // this is our main file
},
{
// create a module for page1/main and include in it
// all its dependencies (dep1, dep2...)
name: "page1/main",
// excluding any dependency that is already included on main module
// i.e. all our shared stuff, like jquery and plugins should not
// be included in this module again.
exclude: ["main"]
}
]
By doing this, we create another per-page main file with all its dependencies. But, since we already have a main file that will load all our shared stuff, we don't need to include them again in page1/main module.
The config is a little verbose since you have to do this for each page module where you have more than one script file.
I uploaded the code of the boilerplate in GitHub: https://github.com/mdezem/MultiPageAppBoilerplate.
It is a working boilerplate, just install node and r.js module for node and execute build.cmd (inside the /build directory, otherwise it will fail because it uses relative paths)
I hope I have been clear. Let me know if something sounds strange ;)
Regards!

<script data-main="js/main" src="js/lib/require.js"></script>
// file: js/main
require(['./global.config'], function(){
require(['./view/home'], function() {
// do something
});
});
This is what I used in my project.

URL cache-busting parameters with RequireJS?

I'm using RequireJS (the jQuery version) and I want to append GET parameters to my scripts to prevent unwanted caching.
I'm using the urlArgs parameter, as suggested in the docs. This is my app-build.js file:
({
appDir: "../",
baseUrl: "scripts/",
urlArgs: "cache=v2",
...
Then I build the project as follows:
$ node ../../r.js -o app.build.js
The output in app-build directory now contains both require-jquery.js, which is the same file as previously, and require-jquery.js?cache=v2, which is blank.
The index.html file doesn't seem to have any references to cache=v2. And when I load the page in a browser, I don't see any cache=v2 parameters appended to any of the scripts.
Am I doing something wrong?

The docs on urlArgs:
“During development it can be useful to use this,
however be sure to remove it before deploying your code”
and this issue from Github, James Burke:
“do not try to use urlArgs during build”

The urlArgs parameter is more of a runtime configuration (i.e., only understood by RequireJS, not the r.js optimizer), seemingly due to its author's stated belief that it is only suited to development (and "bad" dev servers that don't send proper headers). So you'd either need to configure it in your require.config call (in a .js file loaded by require.js, typically main.js or config.js):
require.config({
// other config, like paths and shim
urlArgs: "cache=v2"
});
Or, per this other SO answer, you'd define it in directly in a <script> block before loading require.js.

I would try using a different build.js file for the optimizer vs the build.js file you use running the live app. Based on your description, the optimizer script doesn't seem to properly handle the urlArgs parameter (since it's outputting a file called require-jquery.js?cache=v2).
I wouldn't expect cache=v2 to show up in index.html (why would it?), but you're right to expect it in the network activity log.