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($){
....
});
Related
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?
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/'
});
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.
I am having issues setting up r.js when using require in my angular application. I am new to using AMD so it may be an easy fix. Unforunately the directory structure must remain as is because of the requirement of ability to add more clients using the same Default components.
The error I get is that it can't find the controller dependencies. It is triyng to reference them from Client#1/Directory_For_Prod_Packs/Angular/Default/_Controllers/.js. So essentially it is adding the whole absolute path at the end of where the build file is at, or at least that what it seems like to me. Any help would be amazing. Essentially I'd just like to either have one pack of all my directives, services, controllers, etc. Or packs of controllers.js then directives.js and so forth.
Here is my directory structure.
Angular
Lib
angular.js
Default
Controllers
_Controllers.js //pack of controllers
.js //all the separate Controllers
Directives
_Directives.js
.js
Client#1
main.js //require config
app.js
build.js // r.js build config
And this is my build.js for r.js
({
baseUrl: '../../lib/Angular',
dir: "../../Client#1/ProductionBuild",
paths: {
"controllers": '../../Default/_Controllers/_Controllers',
},
modules: [
{
name: "controllers"
}
]
})
And finally this is my _Controller.js which
define(['angular',
'../../Default/_Controllers/controller1.js',
'../../Default/_Controllers/controller2.js'],
function(angular) {
'use strict';
var dependencies = ['controller1',
'controller2',];
angular.module('app.controllers', dependencies);
}
);
I'm not sure what exactly is the problem (the directory structure and the ../.. seem not to match, though I may be mistaken), but try setting the build.js properties as:
baseUrl: The folder that contains the scripts, relative to the HTML page that loads them, not relative to build.js
dir: Build output folder, relative to build.js
appDir: Application folder. It probably contains an index.html that bootstraps the scripts of your application. The folder pointed to by the baseUrl configuration property must be under this! And this is relative to build.js.
Take extra care about baseUrl, those ../.. look suspicious. It is relative to the index.html, not build.js.
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.