RequireJS: loading modules relatively to the data-main file

Question

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
});

Was your build supposed to combine **all** your modules into a single bundle? If yes, then the problem is not so much the CDN but that RequireJS is seeing a need to fetch files outside the bundle. — Louis, Aug 25 '17 at 15:30
@Louis I edited my question: some core modules are combined, but I still need some extra modules that aren't bundled. — webpn, Aug 25 '17 at 16:28

score 0 · Answer 1 · answered Aug 27 '17 at 02:52

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.

I thought of including the CDN domain on the baseUrl, but I can't hard-code the CDN domain since I will have to use many cdn provider, with different domains that will change frequently. — webpn, Aug 27 '17 at 08:59
Have a json file that has the list of CDN domain names. You can generate the output based on domain names in the rjs optimize callback using regex or so. — Veera Kumar, Aug 28 '17 at 18:39

RequireJS: loading modules relatively to the data-main file

1 Answers1