Use requirejs in gruntjs to build a library, and use it in other projects

Question

I am building a library which is a set of folders containing Model View Controller Javascript files.
Each files has dependencies declared using require syntax:

define([
    'modules/moduleA/src/moduleAModel',
    'modules/moduleA/src/moduleAController',
], function(moduleAModel, moduleAController) {
    function moduleAView(param) {
        // ....
    }

I am compiling this library using GruntJS with the great "grunt-contrib-requirejs".
The problem is that as a library there is no entry point, no main.
I want users to be able to use it by calling each module when they need it.

Here are my questions:

Firstly:
How can I build one javascript file for the library which includes all the modules without declaring them one by one ?

Secondly:
How can I reuse this library later on another project ? I tried this :

define(function(require) {
    var myLibrary = require('js/external-libs/myMinifiedLibrary.min');
    var moduleAV = new moduleAView();

But of course second lines fail, is there something like require(myLibrary.moduleAView) ?

What would you suggest ?

Update:
I found out that when you have minified on one single file all your modules, you have multiple defines on one page, this is interpreted as a script for requirejs and you have to load it twice ! (first time the whole file, second times your main). Then my 'main' or entry point is built manually (which is still a problem) on rockerest answers. So solution to my second question is on this post:
http://jaketrent.com/post/dynamically-require-optimized-modules-requirejs/

score 1 · Answer 1 · answered Apr 21 '15 at 16:39

1

I had the opposite problem: I wanted users to pull the library and not have to know about each internal module.

To accomplish this, I created a single entry point that returns the parent module. The parent then handles deferring to children as necessary.

This file is that entry point.

If I modified that file to return an object, each internal module would be available on the loaded library:

define(
    ["layout", "region"],
    function( Layout, Region ){
        return {
            "LayoutModule": Layout,
            "RegionModule": Region
        };
    }
);

I think this is what you want:

the r.js optimizer builds everything into one file
other code simply includes the library file (require( "myLib" ))
each individual module is available on the response object (myLib.LayoutModule, myLib.RegionModule).

answered Apr 21 '15 at 16:39

rockerest

9,847
3
33
67

Really interesting, it answers my second questions, but still I would have to declare each module on the entry point. The problem of doing that is that I have a library core folder with many files, but also on each optionnal module I have a lot of files, Adding a new line each time I Want to add a module would broke the fact that my code is modular – Tim Apr 22 '15 at 09:51
@Tim It sounds like you're saying something like: "I want a dependency loader to load all my dependencies, but I don't want to have to define my dependencies!" Your code is still modular, but you have to SOMEHOW tell your library what modules it needs! – STLMikey Apr 22 '15 at 17:42
@SLTMikey I probably wasn't so clear, I don't want to define my dependencies 'manually' when I build my library, I want to have everything in one file. Also my depencies are well defined for each files, the problem is that I have a lot of files. I want to be able to use those modules when I use this library. – Tim Apr 23 '15 at 08:24
@rockerest By the way, I don't succeed to use myLib.LayoutModule, I'm probably doing something wrong, should I use require optimizer with a sort of AMD wrap ? – Tim Apr 23 '15 at 08:24

Use requirejs in gruntjs to build a library, and use it in other projects

1 Answers1