How to use node module in client code?

Question

I've installed ReactJs module in my nodejs application, so React appeared in node_modules directory. But I can't use it in client javascript because there is no reference.

So what is the best way to add such a reference ? (Of course I can manually copy react.js script to scripts folder and add reference manually but it leads to code duplication and looks ugly)

Nicky McCurdy · Accepted Answer · 2015-03-02 05:38:26Z

4

Browserify is the tool you are looking for. It takes Node modules and wraps them so you can require() them in client side JavaScript code.

Example from Browserify's readme

Whip up a file, main.js with some require()s in it. You can use relative paths like './foo.js' and '../lib/bar.js' or module paths like 'gamma' that will search node_modules/ using node's module lookup algorithm.
var foo = require('./foo.js');
var bar = require('../lib/bar.js');
var gamma = require('gamma');

var elem = document.getElementById('result');
var x = foo(100) + bar('baz');
elem.textContent = gamma(x);
Export functionality by assigning onto module.exports or exports:
module.exports = function (n) { return n * 111 }
Now just use the browserify command to build a bundle starting at main.js:
$ browserify main.js > bundle.js
All of the modules that main.js needs are included in the bundle.js from a recursive walk of the require() graph using required.

To use this bundle, just toss a <script src="bundle.js"></script> into your html!

answered Mar 2, 2015 at 5:38

Nicky McCurdy

19.8k5 gold badges63 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Ilyin Over a year ago

Wow, thanks for such a detailed answer. Do I have to call browserify every time I need client side script update ?

Alex Ilyin Over a year ago

I mean If i change client side javascript. My guess was that bundle.js contains both client side and server side code so I have to recreate it when client side code changes

Nicky McCurdy Over a year ago

As far as I'm aware, you should only need to run a Browserify command when you update a something in node_modules, not when your other client side code is updated.

Collectives™ on Stack Overflow

How to use node module in client code?

1 Answer 1

Example from Browserify's readme

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Example from Browserify's readme

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related