Develop Reference

Can not get the js file in using requirejs

I'm trying to build client project using requireJs.
But when I published it on the nginx server, an error occurred.
This is my project directory structure
when it ran here, the browser threw a js error.
require(['config/require.conf'], function(){
'use strict';
require(['src/common/js/pageloader'], function(pageloader){
pageloader();
})
})
js error:
GET http://localhost:8011/src/homepage/config/require.conf.js require.js:1961
It seems like the error occurred because I use the relative path (lack of '/').
However, I add the slash as prefix of directory('/config/require.conf').
As a result, when the browser ran here, requirejs didn't add the suffix ".js" for the js file(config/require.conf.js).
Another error occurred~
GET http://localhost:8011/config/require.conf 404 (Not Found)
What should I do for the error? Thanks.

You can pass two things in the dependency list of a require call:
A module name. This is the default. When you pass a module name, RequireJS will convert the name to a path using baseUrl, paths, map, etc. from your RequireJS configuration.
A path. RequireJS considers that you are passing a path if the dependency: a) begins with '/', (which is your case), b) contains an HTML query (e.g. 'foo?bar=1'), c) ends with the .js extension, d) specifies a protocol (e.g. https://).
In this case, RequireJS uses the path as-is, without using its configuration to transform it, and it does not automatically add a .js extension to it.
Your usage is the 2nd case so you have to add .js to your path so that RequireJS can find your file:
require(['/config/require.conf.js'], function() {

RequireJS: optimizer generates name for define module

I'm using gulp.js and an optimization tool for requirejs (gulp-requirejs) it combines all scritps into one file. I have one define module with no name but it generates a name for it. The problem is I don't know how to call that module from another file.
For example in page1.js:
...
define("map",["jquery"],function($){
...
});
define("lib", ["jquery"],function($){
...
});
and in page2.js I would like to call page1.js lib module but I am not sure how to do it? I would prefer if the optimization tool did not set a name then my code works but this way I have no idea how to make it work. Any ideas?

It is not possible to use multiple modules in a single file, unless these modules are named. Otherwise RequireJS won't know how to relate a request for a module with the actual code that defines it.
The typical scenario when optimizing all modules into a single bundle is that there is going to be one specific module in the bundle which serves as the entry point of your application, and then you can just put that module name in paths:
require.config({
paths: {
lib: 'path/to/page1',
}
});
If you do not have a single entry point but may in fact also have code outside the bundle that will initiate loading modules that are in the bundle, then you need to list those modules in bundles:
require.config({
paths: {
lib: 'path/to/page1',
},
bundles: {
lib: ['map', ...],
}
});
The bundles setting I have shown above says essentially "when you look for the module named map, fetch the module lib, and you will have the definition of map."

RequireJS paths config saying "all modules are in this file"

In RequireJS, it's possible to configure paths explicitly for given modules. For example, you can specify that for module foo the module bar should be loaded instead (file bar.js should be loaded):
require.config({
paths: {
"foo": "bar"
}
});
How can I do the same, but for all modules?
I tried using an asterisk, but it will only create a mapping for module * literally:
require.config({
paths: {
"*": "bar"
}
});

According to your question and comment
The TypeScript compiler is able to compile multiple external modules into named AMD modules placed into a single output file. However, to effectively use those modules, RequireJS must be configured so that it knows where to find them.
There is a work-around can be applied. First of all, let's not define any module paths in config except the path for all modules.
require.config({
paths: {
"all": "path/to/all/modules"
},
deps: { "all" } // This to tell requireJS to load 'all' at initial state.
});
And then load the config/main file
<script data-main="scripts/main" src="scripts/require.js"></script>
From this requireJS will simply read all the define() blocks in modules.js. It will registering all the module names you got in the js file. For example if you got define('myModule', [function(){...}]); in your module.js. You can simply call to load it at any place without define a path for it.
For example some where in your code.
requirejs(['myModule', function(myModule){
myModule.doSemething();
});

Combining multiple files in grunt-requirejs

I have a Javascript application spanning multiple files using RequireJS, which I want to concatenate into one for the production environment.
I've been looking at grunt-contrib-requirejs but the instructions for setting up the configuration in Gruntfile.js assume that you already have the concatenated, production source. I'm aware that I could also use grunt-contrib-concat for this, but I was wondering if there's a way to do it with the grunt-contrib-requirejs module.
I've also tried using a wildcard selection for the name field in the configuration, but although Grunt works fine with specifications like app/**/*.js grunt-contrib-requirejs doesn't concatenate them when I specify this.
I found this example on how to do this, but when I include multiple entries in the modules array, running Grunt complains that certain files can't load their dependencies that are specified in the main file's require.config.
For example, if this is main.js:
require.config({
paths: {
'angular': 'http://some.cdn/angular.min'
},
shim: {
angular: {
exports: 'angular'
}
}
});
//Set up basic code
And this is controllers/ctrl.js:
define(['angular'], function(angular) {
...
});
Then it's apparently not loading the configuration from main.js and complains that there's no file /my/project/controllers/angular.js
I've also tried moving the configuration to a file specified with the mainConfigFile option, but this option does not work and it seems that this option was meant to take the Grunt configuration and not the RequireJS configuration.

Require.js optimizer and variables in paths

I have a problem getting r.js to work the way we need it to.
I have the following problem: We have 2 domains (e.g. foo.de and bar.de) and different environments. Depending on what environment and what domain they are running on they need to load a different file from their origin servers. My initial solution was this:
// channelDomain and environmentPath get defined above this script
require.config({
paths: {
'fooscript': channelDomain+environmentPath
}
}
Testing this in the browser unoptimized works exactly as it should but the nightly build complained with:
[Error: Error: The config in mainConfigFile /absolute/path/app/public/js/main.js
cannot be used because it cannot be evaluated correctly while running in the
optimizer. Try only using a config that is also valid JSON, or do not use
mainConfigFile and instead copy the config values needed into a build file or
command line arguments given to the optimizer.
Source error from parsing: /absolute/path/app/public/js/main.js: ReferenceError:
channelDomain is not defined
I tried doing lots of things but I'm running out of ideas. I tried doing the empty: thing in the build file but that didn't work either. I'd be glad if someone could point me into the right direction.

Use two require.config in the same file. The optimizer will only read the first one, as James says here https://github.com/jrburke/r.js/issues/270#issuecomment-13112859, and it will work in the browser after optimization.
So at the end you will have something like this in main.js:
require.config({
//only configurations needed for the transpiler's optimization
});
require.config({
paths: {
'fooscript': channelDomain+environmentPath
}
});