Separate scripts with RequireJS

Question

I recently worked on a web app, and i wanted to separate it into modules. I searched and found out that RequireJs is the best for this. I read the doc, and some tutorials about it and came up with this

    requirejs.config({
    baseUrl: "js/lib",
    shim: {
        'jquery-1.12.1.min': ['jquery-1.12.1.min'],
        'materialize.min': ['materialize.min'],
        'knockout-3.4.0': ['knockout-3.4.0'],
        'pouchdb-5.3.0.min': ['pouchdb-5.3.0.min']
    },
    waitSeconds: 0,
    paths: {
        'jquery-1.12.1.min': 'jquery-1.12.1.min',
        'materialize.min': 'materialize.min',
        'knockout-3.4.0': 'knockout-3.4.0',
        'pouchdb-5.3.0.min': 'pouchdb-5.3.0.min',
    }   
});
require(["jquery-1.12.1.min", "knockout-3.4.0", "materialize.min", "pouchdb-5.3.0.min"], function($, ko) { //My main functions and other stuff ... }

My index has the following:

<script data-main="js/main" src="js/lib/require.js"></script> <script type="text/javascript" src="js/converter.js"></script>

But it seems that my Jquery, KO, materialize.css and pouchdb aren't loading as i see on my chrome dev tools in Network:

I also read about the shim config how to set up the dependences and i want them in that order. I don't really know what am i missing, any help would really be appreciated.

Folder structure is:

js:  
   lib:
     ->jquery-1.12.1.min.js
     ->knockout-3.4.0.js
     ->pouchdb-5.3.0.min.js
     ->materialize.min.js 
     ->require.js 
   main.js
   converter.js

Answer 1

Ok it seems require and materialze.css have a problem with hammer.js, what i recommend is you go and download Hammer.min.js and include it in your lib folder. Then in your main.js add the following:

requirejs.config({
    baseUrl: 'js/lib',
    waitSeconds: 0,
    paths: {
        app: '../app',
        jquery: 'jquery-1.12.1.min',
        materialize: 'materialize.min',
        knockout: 'knockout-3.4.0',
        pouchdb: 'pouchdb-5.3.0.min',
        hammer: 'hammer.min'
    },
    shim: {
        hammer: {
            deps: ['jquery']
        },
        pouchdb: {
            deps: ['jquery']
        },
        knockout: {
            deps: ['jquery'],
            exports: 'ko'
        },
        materialize: {
            deps: ['jquery', 'hammer'],
        },
        jquery: {
            exports: '$'
        }
    }
});

You include you hammer and also the dependency for jquery on it. And i see that you didn't put the PouchDb object in the function:

define(["jquery", "knockout", "pouchdb", "materialize" ], function($, ko, PouchDB) {...

Hope this helps

Answer 2

Using path, requirejs replace module id prefixes (name in config) with the corresponding value.

Using shim you can export a global variable and configure the dependencies ( materialize depends jquery so you have to import jQuery before importing materialize.js )

    requirejs.config({
    baseUrl: "js/lib",
    waitSeconds: 0,
    paths: {
        'jquery': 'jquery-1.12.1.min',
        'materialize': 'materialize.min',
        'knockout': 'knockout-3.4.0',
        'pouchdb': 'pouchdb-5.3.0.min',
        'hammer': 'hammer.min',
    },
    shim: {
        pouchdb: {
            deps: ['jquery']
        },
        knockout: {
            exports: 'ko'
        },
        materialize: {
            deps: ['jquery', 'hammer']
        },
        jquery: {
            exports: '$'
        }
    }
});

require(["jquery", "knockout", "materialize", "pouchdb"], function ($, ko) {
    console.log($);
    console.log(ko);
});