Somone didn’t ask me how to lay out their site to make require.js easy to use, if they had, I would have recommended something like this.

Tree Hazard

├── conf
│   ├── require-build-prod.js
│   └── require-config.js
├── image.js
├── require-css
├── require.js
├── docs
├── js
│   └── Hidechem
│       └── ADrab
│           └── renderers
│               └── vizualisations
├── lib
│   ├── famous
│   └── d3
└── sites
    └── PeaceRoom
        ├── app
        .   └── dist

conf/require-build.prod.js

This is the build script that will make the output, it’s easy to use (check the end of the article).

({
    baseUrl: "../",
    mainConfigFile: "require-config.js",
    optimize: "none",
    name: "sites/PeaceRoom/app/main.js",
    out:  "sites/PeaceRoom/app/dist/built.js",
    wrap: false,
})

See how includes a mainConfigurationFile? Here it is. You’ll find that it includes itself, and a copy of require.js. That will ensure that everything your optimised site needs is in one convenient package (specifically sites/PeaceRoom/app/dist/built.js)

conf/require-config.js

requirejs.config({
    "baseUrl": "../",
    "exclude": [
        "require-css/normalize"
    ],
    "include": [
        "require",
          "require-css/css",
        "conf/require-config" // This file
    ],
    "map": {
         '*': { // https://github.com/guybedford/require-css
             'css': 'require-css/css' // or whatever the path to require-css is
         }
    },
    "paths": {
         "d3": "lib/d3",
         "famous":  "lib/famous-build-2015.js",
         "Hidechem": "js/Hidechem"
     },
});

putting it all together

r.js -o conf/require-build.prod.js

Comments