Node-style require for in-browser javascript? [closed]

Question

Are there any libraries for in-browser javascript that provide the same flexibility/modularity/ease of use as Node's require?

To provide more detail: the reason require is so good is that it:

1. Allows code to be dynamically loaded from other locations (which is stylistically better, in my opinion, than linking all your code in the HTML)
2. It provides a consistent interface for building modules
3. It is easy for modules to depend on other modules (so I could write, for instance, an API that requires jQuery so I can use jQuery.ajax()
4. Loaded javascript is scoped, meaning I could load with var dsp = require("dsp.js"); and I would be able to access dsp.FFT, which wouldn't interfere with my local var FFT

I have yet to find a library that does this effectively. The workarounds I tend to use are:

• coffeescript-concat -- it's easy enough to require other js, but you have to compile it, which means it is less great for fast development (e.g. building APIs in-test)

• RequireJS -- It's popular, straightforward, and solves 1-3, but lack of scoping is a real deal-breaker (I believe head.js is similar in that it lacks scoping, though I've never had any occasion to use it. Similarly, LABjs can load and .wait() does mollify dependency issues, but it still doesn't do scoping)

As far as I can tell, there appear to be many solutions for dynamic and/or async loading of javascript, but they tend to have the same scoping issues as just loading the js from HTML. More than anything else, I would like a way to load javascript that does not pollute the global namespace at all, but still allows me to load and use libraries (just as node's require does).

2020 UPDATE: Modules are now standard in ES6, and as of mid-2020 are natively supported by most browsers. Modules support both synchronous and asynchronous (using Promise) loading. My current recommendation is that most new projects should use ES6 modules, and use a transpiler to fall back to a single JS file for legacy browsers.

As a general principle, bandwidth today is also typically much wider than when I originally asked this question. So in practice, you might reasonably chose to always use a transpiler with ES6 modules, and focus your effort on code efficiency rather than network.

PREVIOUS EDIT (or if you don't like ES6 modules): Since writing this, I have extensively used RequireJS (which now has much clearer documentation). RequireJS really was the right choice in my opinion. I'd like to clarify how the system works for people who are as confused as I was:

You can use require in everyday development. A module can be anything returned by a function (typically an object or a function) and is scoped as a parameter. You can also compile your project into a single file for deployment using r.js (in practice this is almost always faster, even though require can load scripts in parallel).

The primary difference between RequireJS and node-style require like browserify (a cool project suggested by tjameson) uses is the way modules are designed and required:

• RequireJS uses AMD (Async Module Definition). In AMD, require takes a list of modules (javascript files) to load and a callback function. When it has loaded each of the modules, it calls the callback with each module as a parameter to the callback. Thus it's truly asynchronous and therefore well-suited to the web.
• Node uses CommonJS. In CommonJS, require is a blocking call that loads a module and returns it as an object. This works fine for Node because files are read off the filesystem, which is fast enough, but works poorly on the web because loading files synchronously can take much longer.

In practice, many developers have used Node (and therefore CommonJS) before they ever see AMD. In addition, many libraries/modules are written for CommonJS (by adding things to an exports object) rather than for AMD (by returning the module from the define function). Therefore, lots of Node-turned-web developers want to use CommonJS libraries on the web. This is possible, since loading from a <script> tag is blocking. Solutions like browserify take CommonJS (Node) modules and wrap them up so you can include them with script tags.

Therefore, if you are developing your own multi-file project for the web, I strongly recommend RequireJS, since it is truly a module system for the web (though in fair disclosure, I find AMD much more natural than CommonJS). Recently, the distinction has become less important, since RequireJS now allows you to essentially use CommonJS syntax. Additionally, RequireJS can be used to load AMD modules in Node (though I prefer node-amd-loader).

Answer 1

I realize there may be beginners looking to organize their code. This is 2022, and if you're considering a modular JS app, you should get started with npm and Webpack right now.

Here are a few simple steps to get started:

1. In your project root, run npm init -y to initialize an npm project
2. Download the Webpack module bundler: npm install webpack webpack-cli
3. Create an index.html file:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>App</title> </head> <body>          <script src="_bundle.js"></script> </body> </html> 

Pay special attention to _bundle.js file - this will be a final JS file generated by webpack, you will not modify it directly (keep reading).

4. Create a <project-root>/app.js in which you will import other modules:

const printHello = require('./print-hello');  printHello(); 

5. Create a sample print-hello.js module:

module.exports = function() {     console.log('Hello World!'); } 

6. Create a <project-root>/webpack.config.js and copy-paste the following:

var path = require('path');  module.exports = {   entry: './app.js',   output: {     path: path.resolve(__dirname),     filename: '_bundle.js'   } }; 

In the code above, there are 2 points:

• entry app.js is where you will write your JS code. It will import other modules as shown above.
• output _bundle.js is your final bundle generated by webpack. This is what your html will see at the end.

7. Open your package.json, and replace scripts with the following command:

  "scripts": {     "start": "webpack --mode production -w"   }, 

8. And finally run the script watch app.js and generate the _bundle.js file by running: npm start.
9. Enjoy coding!