Specify RequireJS “data-main” attribute in JSF

Question

I am creating a JSF web application and I am trying to use RequireJS to structure my JavaScript files.

However, I cannot get it to work, as RequireJS requires a "data-main" attribute to be placed in the HTML script tag and outputScript does not support that.

I have tried to set it up without the "data-main" attribute and failed.

My directory tree looks like this:

- webapp
  - resources
    + css
    - js
      - app
          signup.js
      - lib
          jquery.js
          require.js
        common-spec.js
        signup-spec.js
  signup.xhtml

I have put the following in the head section of the JSF page:

<h:head>
    <h:outputScript name="js/lib/require.js" />
    <h:outputScript>
        require.config({
            baseUrl: "js/lib",
            paths: {
                app: '../app'
            }
        });
        require(["signup-spec"]);
    </h:outputScript>
</h:head>

The result is that "signup-spec.js" cannot be found, I suppose because the baseUrl is set to another directory (it looks for it into resources/js/lib ).

Basically, signup-spec is what I would put in the "data-main" attribute. I really don't know what to do. Working without "data-main" really confuses me.

Has anyone have any suggestion? Thanks ahead!

Answer 1

you don't have to use a data-main, you can if you desire. If not specified just load your config after it :

    <utils:outputScript name="require.js"/>
    <utils:outputScript name="requireConfig.js"/>