Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to namespace modules in the browser but not in node

How to namespace modules in the browser but not in node

Problem

I have seen many examples of the self-invoking pattern that detects the global object (module.export / window) -- but I am not sure how to do namespacing with this pattern and still have it work in node the same way.

(function(exports) {
    'use strict';

    // how do i do something like this and have it work in node as well
    // exports Namespace.Models.HelloWorld = function () {}

    exports.say = function() {
        return 'hello world';
    };
}(typeof exports === 'undefined' ? this.helloworld = {} : exports));
Problem courtesy of: ezraspectre

Solution

You need Browserify. Write your modules in the node-style and then let browserify turn them into proper client-side scripts :)

From browserify home page:

Write your browser code with node.js-style requires:

// main.js

var foo = require('./foo');
var gamma = require('gamma');

var n = gamma(foo(5) * 3);
var txt = document.createTextNode(n);
document.body.appendChild(txt);

Export functionality by assigning onto module.exports or exports:

// foo.js

module.exports = function (n) { return n * 11 }

Install modules with npm:

npm install gamma

Now recursively bundle up all the required modules starting at main.js into a single file with the browserify command:

browserify main.js -o bundle.js

Browserify parses the AST for require() calls to traverse the entire dependency graph of your project.

Drop a single tag into your html and you're done!


Not only is it fun to write client-side scripts like this but browserify will bundle it all together into a nice and tidy minified single script file :D

Solution courtesy of: Chev

Discussion

View additional discussion.



This post first appeared on Node.js Recipes, please read the originial post: here

Share the post

How to namespace modules in the browser but not in node

×

Subscribe to Node.js Recipes

Get updates delivered right to your inbox!

Thank you for your subscription

×