JavaScript require() on client side

Question

Is it possible to use require() (or something similar) on client side?

Example

var myClass = require('./js/myclass.js');

Answer 1

You should look into require.js or head.js for this.

• Lightness Races in Orbit: @Debra: Why not go to the "Usage" section on their website?
• Torben: Take a look at Require(), if you want a more lightweight solution than require.js, head.js or Lab.js.
• Aprillion: ... or these days you can bundle the client-side code with a plethora of tools such as webpack
• user180574: When using requirejs, pay attention to the caveat: stackoverflow.com/questions/29652716/…. Otherwise, works for me.

Answer 2

I've been using browserify for that. It also lets me integrate Node.js modules into my client-side code.

I blogged about it here: Add node.js/CommonJS style require() to client-side JavaScript with browserify

Answer 3

If you want to have Node.js style require you can use something like this:

var require = (function () {
 var cache = {};
 function loadScript(url) {
 var xhr = new XMLHttpRequest(),
 fnBody;
 xhr.open('get', url, false);
 xhr.send();
 if (xhr.status === 200 && xhr.getResponseHeader('Content-Type') === 'application/x-javascript') {
 fnBody = 'var exports = {};\n' + xhr.responseText + '\nreturn exports;';
 cache[url] = (new Function(fnBody)).call({});
 }
 }
 function resolve(module) {
 //TODO resolve urls
 return module;
 }
 function require(module) {
 var url = resolve(module);
 if (!Object.prototype.hasOwnProperty.call(cache, url)) {
 loadScript(url);
 }
 return cache[url];
 }
 require.cache = cache;
 require.resolve = resolve;
 return require;
}());

Beware: this code works but is incomplete (especially url resolving) and does not implement all Node.js features (I just put this together last night). YOU SHOULD NOT USE THIS CODE in real apps but it gives you a starting point. I tested it with this simple module and it works:

function hello() {
 console.log('Hello world!');
}
exports.hello = hello;

• Jasmine: I liked this answer because it's not a solution. I really hate it when people just give the solution. Give the answer that helps them find the solution next time. Great job!

Answer 4

I asked myself the very same questions. When I looked into it I found the choices overwhelming.

Fortunately I found this excellent spreadsheet that helps you choice the best loader based on your requirements:

https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ

• Costa Michailidis: I wonder if the presence of a spreadsheet worth of options means that we as developers haven't found a great way to do this yet?

Answer 5

Take a look at requirejs project.

Answer 6

I have found that in general it is recommended to preprocess scripts at compile time and bundle them in one (or very few) packages with the require being rewritten to some "lightweight shim" also at compile time.

I've Googled out following "new" tools that should be able to do it

• http://mixu.net/gluejs/
• https://github.com/jrburke/almond
• https://github.com/component/builder2.js

And the already mentioned browserify should also fit quite well - http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/

What are the module systems all about?

• Older Stack Overflow explanation - Relation between CommonJS, AMD and RequireJS?

• Detailed discussion of various module frameworks and the require() they need is in Addy Osmani - Writing Modular JavaScript With AMD, CommonJS & ES Harmony

• eran otzap: And beside the bundeling does it also enable node packages to be used fromin that bundle ?

Answer 7

You can create elements to the DOM, which loads items.

Like such:

var myScript = document.createElement('script'); // Create new script element
myScript.type = 'text/javascript'; // Set appropriate type
myScript.src = './js/myclass.js'; // Load javascript file

Answer 8

Simply use Browserify, what is something like a compiler that process your files before it go into production and packs the file in bundles.

Think you have a main.js file that require the files of your project, when you run browserify in it, it simply process all and creates a bundle with all your files, allowing the use of the require calls synchronously in the browser without HTTP requests and with very little overhead for the performance and for the size of the bundle, for example.

See the link for more info: http://browserify.org/

• xmojmr: Browserify was already mentioned by @dkastner back in 2011. I've Googled some alternatives in my answer, but I don't know the #1 solution yet

Answer 9

Some answers already - but I would like to point you to YUI3 and its on-demand module loading. It works on both server (node.js) and client, too - I have a demo website using the exact same JS code running on either client or server to build the pages, but that's another topic.

YUI3: http://developer.yahoo.com/yui/3/

Videos: http://developer.yahoo.com/yui/theater/

Example:

(precondition: the basic YUI3 functions in 7k yui.js have been loaded)

YUI({
 //configuration for the loader
}).use('node','io','own-app-module1', function (Y) {
 //sandboxed application code
 //...
 //If you already have a "Y" instance you can use that instead
 //of creating a new (sandbox) Y:
 // Y.use('moduleX','moduleY', function (Y) {
 // });
 //difference to YUI().use(): uses the existing "Y"-sandbox
}

This code loads the YUI3 modules "node" and "io", and the module "own-app-module1", and then the callback function is run. A new sandbox "Y" with all the YUI3 and own-app-module1 functions is created. Nothing appears in the global namespace. The loading of the modules (.js files) is handled by the YUI3 loader. It also uses (optional, not show here) configuration to select a -debug or -min(ified) version of the modules to load.

Answer 10

Here's a solution that takes a very different approach: package up all the modules into a JSON object and require modules by reading and executing the file content without additional requests.

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6/require depends on having a JSON package available at runtime. The require function is generated for that package. The package contains all the files your app could require. No further http requests are made because the package bundles all dependencies. This is as close as one can get to the Node.js style require on the client.

The structure of the package is as follows:

entryPoint: "main"
distribution:
 main: 
 content: "alert(\"It worked!\")"
 ...
dependencies:
 <name>: <a package>

Unlike Node a package doesn't know it's external name. It is up to the pacakge including the dependency to name it. This provides complete encapsulation.

Given all that setup here's a function that loads a file from within a package:

loadModule = (pkg, path) ->
 unless (file = pkg.distribution[path])
 throw "Could not find file at #{path} in #{pkg.name}" 
 program = file.content
 dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)
 module =
 path: dirname
 exports: {}
 context =
 require: generateRequireFn(pkg, module) 
 global: global
 module: module
 exports: module.exports
 PACKAGE: pkg
 __filename: path
 __dirname: dirname
 args = Object.keys(context)
 values = args.map (name) -> context[name]
 Function(args..., program).apply(module, values)
 return module

This external context provides some variable that modules have access to.

A require function is exposed to modules so they may require other modules.

Additional properties such as a reference to the global object and some metadata are also exposed.

Finally we execute the program within the module and given context.

This answer will be most helpful to those who wish to have a synchronous node.js style require statement in the browser and are not interested in remote script loading solutions.

Answer 11

I find the component project giving a much more streamlined workflow than other solutions (including require.js), so I'd advise checking out https://github.com/component/component . I know this is a bit late answer but may be useful to someone.

Answer 12

Here's a light weight way to use require and exports in your web client. It's a simple wrapper that creates a "namespace" global variable, and you wrap your CommonJS compatible code in a "define" function like this:

namespace.lookup('org.mydomain.mymodule').define(function (exports, require) {
 var extern = require('org.other.module');
 exports.foo = function foo() { ... };
});

More docs here:

https://github.com/mckoss/namespace

Answer 13

The clientside-require library provides an asynchronous load() function that can be used to load any JS file or NPM module (which uses module.exports), any .css file, any .json, any .html, any any other file as text.

e.g., npm install clientside-require --save

<script src = '/node_modules/clientside-require/dist/bundle.js'></script>
<script>
load('color-name') // an npm module
 .then(color_name=>{
 console.log(color_name.blue); // outputs [0, 0, 255]
 })
</script>

A really cool part of this project is that inside of any load()ed script, you can use the synchronous require() function the same way you would expect in node.js!

e.g.,

load('/path/to/functionality.js')

and inside /path/to/functionality.js:

var query_string = require("qs") // an npm module
module.exports = function(name){
 return qs.stringify({
 name:name,
 time:new Date()
 }
}

That last part, implementing the synchronous require() method, is what enables it to utilize NPM packages built to run on the server.

---

This module was designed to implement the require functionality as closely as possible in the browser. Disclaimer: I have written this module.

• jallmer: Is there a complete working example somewhere? I am trying to load my own classes on the client side and it won't work.

Answer 14

Yes it is very easy to use, but you need to load javascript file in browser by script tag

<script src="module.js"></script> 

and then user in js file like

var moduel = require('./module');

I am making a app using electron and it works as expected.