AMD - Building library example

Question

It was suggested that I read on AMD and maybe rethink my library setup. For the moment I've coded all of it the IIFE way, hiding all the small components from the global scope.

But when I saw how easy it is to just define() things in AMD, I wanted to try it out!

But I ran into a couple of problems and I can't seem to understand where it starts and how things are loaded in. Now, be aware that I've read a lot on the subject and I searched for answers, but I think it's more a misconception on my part that blocks me from understanding what I read haha.

So I will ask as I understand it! :)

---

So let's start with a simple example ( by the way I don't want to create a nodeJS module, but a standard library for websites ), let's say I have this code :

//----------------------------------------------
// main.js
//----------------------------------------------

var myLib = {}

//----------------------------------------------
// hello.js
//----------------------------------------------

myLib.hello = function() { console.log("hello"); }

//----------------------------------------------
// bye.js
//----------------------------------------------

myLib.bye = function() { console.log("bye"); }

I would like to turn it into something like :

//----------------------------------------------
// main.js
//----------------------------------------------

define("myLib", ["hello". "bye"], function( hello, bye ){
    return {
        hello: hello,
        bye: bye
    };
});

//----------------------------------------------
// hello.js
//----------------------------------------------

define(function(){
    return function() { console.log("hello"); 
})

//----------------------------------------------
// bye.js
//----------------------------------------------

define(function() { 
    return function() { console.log("bye"); }
});

---

Questions

1. How do I attach myLib to the window object ( what I found ) ? Can you please provide me an example that works with myLib ?
2. What happens in the HTML? How many script tags do I need to make this work? One : <script ... scr="loadMyLib.js"></script> ?
3. As I understood, I need requireJS as a dependency when working the AMD way, right?
4. Is there something wrong with how I see all of this? I'm thinking maybe AMD is meant only for nodeJS maybe?

Why change to AMD?

For many reasons:

• I don't have to write each time (function(){...})().
• No more script tags in the HTML ( well just one, the library...and the dependencies ).
• More simple :D

Answer 1

Ok, so I finally got it down. Here is how I did :

---

1. Download requireJS.

As I understood, AMD is a specification for the programming language JavaScript. It defines an application programming interface (API) that defines code modules and their dependencies, and loads them asynchronously if desired. - Wikipedia

RequireJS implements AMD.

---

2. Create your project setup.

Let's create the following project :

./
|-- js
|   |-- lib
|   |   |-- jquery.js
|   |   |-- babana.js   // Whatever that is.
|   |   |-- require.js  // requireJS (YES).
|   |
|   |-- src
|   |   |-- methods
|   |   |   |-- hello.js
|   |   |   |-- bye.js
|   |   |
|   |   |-- core.js     // Core of our library.
|   |
|   |-- app.js  // Important
|
|-- index.html

---

3. Create your index.html file and insert the requireJS script like so :

<script data-main="js/app" src="js/lib/require.js"></script>

There are some important things going on here :

1. Well, you must load the require.js library.
2. You must specify the source file of your project in the data-main attribute. See this file as the entry point to your library's code. In this case: app.js.

This can seem confusing as of how it all comes together, but no worries, we are getting there soon enough. :)

---

4. Set requireJS configurations and require our library.

You remember how we specified the source file in the data-main attribute of the script tag? Let's add all we need in there :

//------------------------------
// js/app.js
//------------------------------

// Config
requirejs.config({
    baseUrl: 'js/src',
    paths: {
        pixi: '../lib/pixi',
        jquery: '../lib/jquery',
        banana: '../lib/banana'
    }
});

// Load our library.
requirejs(['core'], function( MyLib) {

    // Set it to the global scope.
    window.MyLib = MyLib;

});

There is a lot going on, so I'll provide some explanations.

requirejs.config

• baseUrl: Every time we want to load/require a js file, it will search for the desired file starting at the url we specify here. In our case, we set it to js/src as most of our files are located there.
• paths: You can manually set all the paths here if you want. A good idea is to set the external libraries here, as you may request them in your library. Also notice how you have to write ../, this is because it starts from the baseUrl.

requirejs( array?, function )

• array (optional): This is your request array. You insert all the js files you want to be loaded in this array. Notice that to use a loaded function or object, you need to set a parameter in the function next to it. Here we load core and the parameter that provides it is myLib.
• function: This is the action function. Here you put the code be executed. It is important at some point in your program to export your library to the global scope: window.

5. Define the core and the rest of your library.

There is, of course, a lot of ways to create your library structure. This is one way of doing it. Check jQuery's setup for some inspirations.

//------------------------------
// js/src/core.js
//------------------------------

define( [
    "./methods/hello",
    "./methods/bye"
], function( hello, bye ) {

"use strict";

var 
    version = "1.0",
    MyLib = function() { }; // Define a local copy of MyLib

MyLib.fn = MyLib.prototype = {
    constructor: MyLib, 

    // Loaded functions
    hello: hello,
    bye: bye
};

return MyLib;

});


//------------------------------
// js/src/methods/hello.js
//------------------------------

define( function() {
    return function() {
        console.log("hello");
    };
} );


//------------------------------
// js/src/methods/bye.js
//------------------------------

define( function() {
    return function() {
        console.log("bye");
    };
} );

Well, I won't explain how all of this works together, because this answer is already to long haha. But you get the idea.

---

6. Use your library in the browser!

Your library should now be available like so :

MyLib.fn.hello() or MyLib.fn.bye().