RequireJS shim config doesn't recognize paths - javascript

So I am using requirejs in my project and I have a main folder with another folder in it. The main folder has the main.js and index.html in which there is a script tag with a data-main attribute pointing to the main.js. Inside the main.js, I have the require.config set up before proceeding with my require() call with all the dependencies. In the configuration, the baseUrl is set to "./". I want to reference a file inside the second folder using the shim config. However, when I try to do this, it gives the me the error that the file is not found. If I move the file that I want from the second folder into the main folder and then use the shim config it works perfectly fine. Only when I try to specify a path like so:
shim: {
"Other Files/fileIWant": {exports: 'whatever'}
}
it doesn't work. How can I use a path directory with the shim config?

Related

How to change path for i18n with RequireJS r.js build

I'm using RequireJS for my javascript project, and r.js to build one single javascript file for production. This single file (main.js) is then uploaded to a CDN. This all works very fine, but now I'm trying to add i18n support.
The problem is that the location of the i18n file is relative to the main javascript file. So within a module, I would have:
define(['i18n!nls/text'], function(Translation) { });
This all works very fine when I'm developing, but for production the problem is that the translation file is not relative to the main.js file as this is placed in a CDN. I don't want to store the translation file in the CDN, so how do I change the reference to that file in the build process?
I found a solution to my problem.
In the RequireJS config I've added:
requirejs.config({
paths: {
nls: "/js/nls"
}
});
Because the path starts with a slash, RequireJS knows it's not relative. Now the problem I got was that the build would fail, as RequireJS would be looking for default language files in /js/nls. Therefore, I added a symlink from the root of my webserver to the nls directory on the machine.
Had the same issue.
Use baseUrl config
require.config({
baseUrl: '/path_for_not_included_modules/'
});

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.

RequireJS Config mapping whole directories

Is it possible to map a whole directory the node_modules directory for example to src/lib/ in the require config?
Sample Project:
project/
project/node_modules
project/src/
project/src/lib/
In RequireJS you actually can configure paths that points to a folder. And, you can name your path whatever you want. For example, if you have a folder named node_modules and you have some libs in there including jquery, you can configure a path like
require.config({
paths: {
'lib' : '/path_to_node_module_folder'
}
});
and later in your module you can require jquery like
define(['lib/jquery'], function($){
....
});

RequireJS / r.js 'baseURL' Property Seemingly Ignored

I am trying to use the r.js optimizer to build all of my dependencies into a single file. Here is my file structure:
app
bin
src
css
main.css
js
libs
raphael-2.1.0
eve.js
raphael.amd.js
raphael.core.js
raphael.svg.js
raphael.vml.js
jquery-1.8.0.js
require-2.0.5.js
main.js
build.js
index.html
r.js
Here are the contents of build.js:
({
baseURL: 'js',
dir: '../bin',
paths: {
'jquery': 'libs/jquery-1.8.0',
'raphael': 'libs/raphael-2.1.0/raphael.amd'
},
name: 'main',
removeCombined: true
})
The 'libs/raphael-2.1.0/raphael.amd' dependency loads everything else in the raphael-2.1.0 directory. The app works as expected if I visit app.local/src, it loads the modules at runtime via require with a single script tag in my index.html file like this:
<script src="js/libs/require-2.0.5.js" data-main="js/main.js" type="text/javascript" charset="utf-8"></script>
However, if I try to run the command node r.js -o src/build.js from app, I get an error like:
Error: ERROR: module path does not exist: /app/src/main.js for module named: main. Path is relative to: /app
at /app/r.js:14215:31
... and everything gets copied into bin "as is". If I add 'main': 'js/main' to the paths object, then r.js can't find jquery and raphael, if I ad js/ to the jquery and raphael paths then libs/raphael-2.1.0/rapheal.amd's dependency declarations are wrong. If I update those, then everything builds as expected, but now the app at app.local/src/index.html is broken. Also, I thought that was the point of having a baseURL property in the build file no? It looks to me like baseURL is being ignored. What am I doing wrong?
As most things in JavaScript, the baseUrl setting is case sensitive. Change URL to Url and see if it helps.

RequireJS and Mustache (or any other engine): where to put templates

I am using RequireJS and Mustache in a Javascript application. The content of the templates is inside some external files, which are loaded via the text plugin.
The only thing that slightly annoys me is the directory structure this imposes. All my scripts live inside a js directory, like this
index.html
js
libs
require.js
text.js
jquery.js
...
controllers
...
views
...
...
Hence I configure RequireJS with baseUrl = 'js', to simplify module names. But this force me to have templates inside the js directory, otherwise they are not visible to the text plugin.
Is there a way to configure RequireJS so that text files dependencies are looked elsewhere than the scripts directory?
(Of course I could avoid the text plugin and manually define AJAX requests to grab the files, but this is not the point of the question. If possible, I would like to use the existing tools)
You can specify an absolute path. From the docs:
However, if the dependency name has one of the following properties, it is treated as a regular file path, like something that was passed to a tag:
Ends in ".js"
Starts with a "/"
Contains an URL protocol, like "http:" or "https:"
I usually set up my baseUrl to . and script paths starting with js like this:
require.config({
baseUrl: ".",
paths: {
"lodash": "js/ext/lodash/dist/lodash",
"jquery": "js/ext/jquery/jquery",
"domReady": "js/ext/requirejs-domready/domReady",
"text": "js/ext/requirejs-text/text.js"
}
});
Now I can keep templates in ./templates and reference them easily.

Categories

Resources