Overriding normalizeName for the optimizer generated code about require-css

[guybedford]

Normalize should be present in the written layer as 'common/js/libs/require/normalize'?

If css is written into the layer 'common/js/libs/require/css', then normalize should be that as they sit at the same path.

Can you check the define statements in the written file and see what it should be?

There shouldn't be a need for a separate name as there is only one absolute moduleId it should map to.

[mparisot]

My file is in 'common/js/libs/require/normalize' and the written file is also 'common/js/libs/require/normalize'.

But the problem is that require.js doesn't realize that 'common/js/libs/require/normalize' and the './normalize' are the same file and try to get it from the server while it's already in my optimized main.js as the dependance of css.js that's why I wanted to be able to tell him.

[guybedford]

Hmm, it should pick up the absolute name correctly if that's how it's written in.

Before loading the css layer, try running this:

  require(['common/js/libs/require/normalize']);

If that needs to request a separate URL then there's something wrong with the layer loading, since effectively, we're doing the following:

  define('common/js/libs/require/normalize', function() {
    //return ...
  });
  require(['common/js/libs/require/normalize']);

Builds are designed to work so that the above doesn't need to make a URL request.

[mparisot]

Here is what I have in my main.js :

define('normalize',['require', 'module'], function(require, module) {...}

define('css',['require', './normalize'], function(require, normalize) {...}

require(['css', 'common/js/libs/require/normalize', 'require'], function(css, normalize, require) { 

Both css.js and normalize.js are in common/js/libs/require/

With that I have a call to fetch normalize.js from the server

If I change the last line to :

require(['css', 'normalize', 'require'], function(css, normalize, require) { 

No more extra call.

In my optimizer build I have my module :

{
            name: 'common/main',
            include:[
                'dot',
                'text',
                'async',
                'css',
                'text',
                'mdetect',
                'loadingUtils',
                'storage',
                'util',
                'listviewUtils'
           ]
        },

And in my require.js config :

require.config({
    baseUrl: '/mob-web/mob',
    paths:{
        /* chemins pour faciliter la saisie */
        'common':'common/js',
        'conf':'common/conf',
        'common-css':'common/css',
        /* librairies externes */
        "jquery": "empty:",
        'jquery.mobile':'common/js/libs/jquery.mobile',
        'i18next':'js/libs/i18next',
        'dot':'common/js/libs/dot',
        'mdetect':'common/js/libs/mdetect',
        /* plugins require.js */
        'text':'common/js/libs/require/text',
        'async':'common/js/libs/require/async',
        'css':'common/js/libs/require/css',
        'css-builder':'common/js/libs/require/css-builder',
        'normalize':'common/js/libs/require/normalize',
        'common/js/libs/require/normalize':'common/js/libs/require/normalize',
        /* librairies internes */
        'loadingUtils':'common/js/libs/loadingUtils',
        'storage':'common/js/libs/storage',
        'util':'common/js/libs/util',
        'listviewUtils':'common/js/libs/listviewUtils',
        'stickyDivider':'common/js/libs/stickyDivider',
        'dynamicLoader':'common/js/dynamicLoader',
        'deviceChecker':'common/js/libs/deviceChecker',
        /* chemin de base des modules */
        'charts':'modules/charts/js',
        'home':'modules/home/js',
        'agency':'modules/agency/js',
        'settings':'modules/settings/js',
        'alertes':'modules/alertes/js',
        'comptes':'modules/comptes/js',
        'virements':'modules/virements/js'
    }

Something might be off in all that as it's my first project with require and I'm aiming to be very modular.

I tried to delete the path in my config but then the optimizer refuse to build as it looks for normalize in the build's baseUrl

Dunno if it's more clear. If not I will continue to look into it tomorrow.

Thank you for your help!

[guybedford]

The issue here is that you are specifying a paths config to normalize and css-builder as absolute paths, when relative paths are expected.

The way to fix this is to use the map config instead of the paths config for the css module.

Try something along these lines:

    require.config({
      baseUrl: '/mob-web/web',
      map: {
        '*': {
          'css':'common/js/libs/require/css',
        }
      },
      paths: { 
        /* chemins pour faciliter la saisie */
        'common':'common/js',
        'conf':'common/conf',
        'common-css':'common/css',
        /* librairies externes */
        "jquery": "empty:",
        'jquery.mobile':'common/js/libs/jquery.mobile',
        'i18next':'js/libs/i18next',
        'dot':'common/js/libs/dot',
        'mdetect':'common/js/libs/mdetect',
        /* plugins require.js */
        'text':'common/js/libs/require/text',
        'async':'common/js/libs/require/async',
        /* librairies internes */
        'loadingUtils':'common/js/libs/loadingUtils',
        'storage':'common/js/libs/storage',
        'util':'common/js/libs/util',
        'listviewUtils':'common/js/libs/listviewUtils',
        'stickyDivider':'common/js/libs/stickyDivider',
        'dynamicLoader':'common/js/dynamicLoader',
        'deviceChecker':'common/js/libs/deviceChecker',
        /* chemin de base des modules */
        'charts':'modules/charts/js',
        'home':'modules/home/js',
        'agency':'modules/agency/js',
        'settings':'modules/settings/js',
        'alertes':'modules/alertes/js',
        'comptes':'modules/comptes/js',
        'virements':'modules/virements/js'
      }
    });

With 'css' as a map config, the relative paths for css-builder and normalize will then be worked out correctly with out any extra config, and that should sort out the build as well (as long as the same map config is included in the client config).

[mparisot]

God, I completly mixed map and path. I just reread the doc and now I understand what the difference between them!

Thank you very much, that fixed my problem and will most likely simplify a lot my config as well as I had aliases mixed wih paths.

I hate whoever choose map as a name instead of alias!

Thank you again for your help and your plugins!

I should be done with require.js config for now but if you need some stuff tested under rhino send me an email at mathieu.parisot on gmail

[guybedford]

@mparisot Yeah understanding that config difference confused me as well initially. Glad to hear it's working now, and thanks again for the all the Rhino feedback! Good luck with your project.