52

I would like to use the CommonJS module system in a clientside javascript application. I chose nodejs as implementation but can't find any tutorial or docs on how to use nodejs clientside, ie without using node application.js

I included node.js like this in my html page:

<script type="text/javascript" src="node.js"></script>

Note that I didn't make nodejs on my local machine, I'm on Windows anyway (I'm aware of the Cygwin option). When I want to use the require function in my own javascript it says it's undefined.

var logger = require('./logger');

My question is, is it possible to use nodejs like this?

Nicolas Mommaerts
  • 3,207
  • 4
  • 35
  • 55

7 Answers7

40

SubStack on github has a module called node-browserify.

It will compress and bundle your modules and deliver it as a single js file, but you use it just like Node.js (example from module readme):

<html>
    <head>
    <script type="text/javascript" src="/browserify.js"></script>
    <script type="text/javascript">
        var foo = require('./foo');

        window.onload = function () {
            document.getElementById('result').innerHTML = foo(100);
        };
    </script>
</head>
<body>
    foo = <span style='font-family: monospace' id="result"></span>
</body>
</html>

From the module description:

Browserify

Browser-side require() for your node modules and npm packages**

Browserify bundles everything ahead-of-time at the mount point you specify. None of this ajaxy module loading business.

More features:

  • recursively bundle dependencies of npm modules
  • uses es5-shim for browsers that suck
  • filters for {min,ugl}ification
  • coffee script works too!
Marcello Bastea-Forte
  • 1,167
  • 1
  • 10
  • 7
  • 5
    I've used Browserify for a while now. What a headache... try Head JS – BMiner Oct 24 '11 at 13:51
  • 3
    @BMiner, You should add that as a separate answer. So folks can vote up/down. – studgeek Jun 12 '12 at 20:07
  • 1
    @marcello are you sure this is how Browserify works? From my reading you can't just add a ` – Adam Feb 29 '16 at 17:30
20

Browserify magically lets you do that.

Kos
  • 4,890
  • 9
  • 38
  • 42
Katie
  • 45,622
  • 19
  • 93
  • 125
18

The accepted answer is correct when it comes to RequireJS. But, fast-forward to 2020 and we now have ES modules pretty much on every browser except IE <= 11.

So, to answer your question "how to use node.js module system on the clientside". Let's start with the fact that you could leverage ES modules already, e.g.

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>Hello 2020</title>
  <!-- load the app as a module, also use defer to execute last -->
  <script type="module" src="./app.js"></script>
</head>

<html lang="en">
  <body>
      <div id="app">
          <h1>Demo</h1>
      </div>
  </body>
</html>

app.js

import { hello } from './utils.js'

window.addEventListener('DOMContentLoaded', function (e) {           
    document.getElementsByTagName('h1')[0].innerText = hello('world');
});

util.js

function hello(text) {
    return `$hello {text}`;
}

export { hello };

Now let's assume you want to use an npm package in your browser (assuming this package can run on both browser and node). In that case, you may want to check out Snowpack.

Snowpack 2.0 is a build system designed for this new era of web development. Snowpack removes the bundler from your dev environment, leveraging native ES Module (ESM) support to serve built files directly to the browser

In other words, you can use npm packages thus allowing you to use the "node module system" in your client application.

Alex Nolasco
  • 18,750
  • 9
  • 86
  • 81
17

Node.js is a serverside application where you run javascript on the server. What you want to do is use the require function on the client.

Your best bet is to just write the require method yourself or use any of the other implementations that use a different syntax like requireJS.

Having done a bit of extra research it seems that no-one has written a require module using the commonJS syntax for the client. I will end up writing my own in the near future, I recommend you do the same.

[Edit]

One important side effect is that the require function is synchronous and thus loading large blocks of javascript will block the browser completely. This is almost always an unwanted side-effect. You need to know what you're doing if you're going to do this. The requireJS syntax is set up so that it can be done asynchronously.

Matt Fenwick
  • 48,199
  • 22
  • 128
  • 192
Raynos
  • 166,823
  • 56
  • 351
  • 396
8

Webpack

I would recommend Webpack which automates node module loading, dependencies, minification, and much more.

Installation

To use node modules in your project, first install node.js on your machine. The package management system NPM should be installed along the way. If you have already installed node.js, update Node.js and NPM to the latest version.

Usage

Initialization

Open your project in your code editor and inititialize npm by typing npm init -y to the command line. Next, install webpack locally by typing npm install webpack webpack-cli --save-dev. (--save-dev means these dependencies are added to the devDependencies section of your package.json file which are not required for production)

Reorder Folder Structure

Follow the tree structure below to reconstruct your project folder:

yourProjectName
  |- package.json
  |- /dist
    |- index.html
  |- /src
    |- index.js

Create a dist folder to hold all distribution files and move index.html to that folder. Next, create a src folder for all source files and move your js file to that folder. You should use the exact same file and folder names as appeared in the tree structure. (these are the default of Webpack but you can configure them later by editing webpack.config.js)

Refactor dependencies

Remove all <script> importations in index.html and add <script src="main.js"></script> before the </body> tag. To import other node modules, add import statements at the beginning of your index.js file. For example, if you want to import lodash, just type import _ from 'lodash'; and proceed to use the _ in your index.js file.

NOTE: Don't forget to first install the node package first before importing it in JS. To install lodash locally, type npm install lodash. Lodash will be automatically saved to your production dependencies in package.json

Run Webpack

Finally, run webpack by typing npx webpack in your command line. You should see main.js generated in the dist folder for you by Webpack.

Additional resources

The above guide provides only the most basic way to use Webpack. To explore more useful use cases, go to the official tutorial of Webpack. It provides extremely comprehensive tutorials on topics such as asset management, output management, guides for development and production, etc.

Reference

https://webpack.js.org/guides/getting-started/

Community
  • 1
  • 1
AlienKevin
  • 2,691
  • 2
  • 17
  • 19
  • 1
    It doesn’t look like it will work if we import ‘fs’ module, and use fs to read a file using ‘fs.readFileSync’ – Praveer Kumar May 21 '19 at 12:55
  • @PraveerKumar I find that the package `fs` is not currently in use from npm. For getting started with module loading, I recommend you check out [codesandbox](https://codesandbox.io/dashboard/recent) which completely automates module bundling for npm modules, React, Vue, Angular, Gatsby, etc. It actually uses VC Code in the browser and features hot reloading and code collaboration. I found it particularly useful for testing out new modules and APIs. – AlienKevin May 21 '19 at 18:12
3

If you'd like to write code for browser with same style modules as you do for Node.js, try Webmake. Take a look also at simple prototype of application build that way: SoundCloud Playlist Manager

Mariusz Nowak
  • 32,050
  • 5
  • 35
  • 37
0

There is a good require node.js-like library for client side. It's called wrapup. Check it out kamicane/wrapup

Volker Weckbach
  • 1
  • 1