I have been prototyping a JavaScript application and now I want to move to a more robust setup using browserify and managing dependencies with require.

Currently I have the following files in my application:

chart.js
form.js
highcharts-options.js
vendor/
  highcharts.js
  jquery.js

highcharts-options.js is basically a list of constants, while chart.js looks like this...

var myChart = { 
  setup: function(data) { ...  this.render(data); },
  render: function(data) { ... }
},

and form.js looks like this:

var myForm = { 
  setup: function() { button.onclick(_this.getData(); },
  getData: function() { // on ajax complete, callChart },
  callChart: function() { myChart.setup(data); }
};
myForm.setup();

And then I have an index.html page that imports everything as follows:

<script src="/js/vendor/highcharts.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/highcharts-options.js"></script>
<script src="/js/chart.js"></script>
<script src="/js/form.js"></script>

So now I want to move this to a more modern setup with browserify.

I have deleted the vendor directory and instead created an index.js file and a package.json file, so now my directory structure looks like this:

index.js
package.json
chart.js
form.js
highcharts-options.js
node_modules/

I have run npm i --save highcharts-browserify and npm i --save jquery and that has saved these modules to package.json and installed them in node_modules. I've also added a build task in package.json: browserify index.js -o bundle.js. And in my front-end template I know just have:

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

So far so good.

My question is what to put into my index.js file, because I'm not sure how to import the files that I already have. So far I've got this:

var $ = require('jquery');
var HighCharts = require('highcharts-browserify');

var options = require('highcharts-options');
var myChart = require('chart');
var myForm = require('form');

myForm.setup(); 

But when I try to build this, I get:

 Error: Cannot find module 'chart' from '/mypath/static/js/app'

It looks like require doesn't know how to find this file, or how to import it, which is not surprising given that this is all total guesswork on my part.

How should I adapt these files to work in a more modular way? Am I on the right lines, or is this completely the wrong approach? I'm not even sure what I should be Googling for.

(NB: Eventually I want to refactor chart.js and form.js to use Backbone, but I need to work one step at a time.)

I have been prototyping a JavaScript application and now I want to move to a more robust setup using browserify and managing dependencies with require.

Currently I have the following files in my application:

chart.js
form.js
highcharts-options.js
vendor/
  highcharts.js
  jquery.js

highcharts-options.js is basically a list of constants, while chart.js looks like this...

var myChart = { 
  setup: function(data) { ...  this.render(data); },
  render: function(data) { ... }
},

and form.js looks like this:

var myForm = { 
  setup: function() { button.onclick(_this.getData(); },
  getData: function() { // on ajax complete, callChart },
  callChart: function() { myChart.setup(data); }
};
myForm.setup();

And then I have an index.html page that imports everything as follows:

<script src="/js/vendor/highcharts.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/highcharts-options.js"></script>
<script src="/js/chart.js"></script>
<script src="/js/form.js"></script>

So now I want to move this to a more modern setup with browserify.

I have deleted the vendor directory and instead created an index.js file and a package.json file, so now my directory structure looks like this:

index.js
package.json
chart.js
form.js
highcharts-options.js
node_modules/

I have run npm i --save highcharts-browserify and npm i --save jquery and that has saved these modules to package.json and installed them in node_modules. I've also added a build task in package.json: browserify index.js -o bundle.js. And in my front-end template I know just have:

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

So far so good.

My question is what to put into my index.js file, because I'm not sure how to import the files that I already have. So far I've got this:

var $ = require('jquery');
var HighCharts = require('highcharts-browserify');

var options = require('highcharts-options');
var myChart = require('chart');
var myForm = require('form');

myForm.setup(); 

But when I try to build this, I get:

 Error: Cannot find module 'chart' from '/mypath/static/js/app'

It looks like require doesn't know how to find this file, or how to import it, which is not surprising given that this is all total guesswork on my part.

How should I adapt these files to work in a more modular way? Am I on the right lines, or is this completely the wrong approach? I'm not even sure what I should be Googling for.

(NB: Eventually I want to refactor chart.js and form.js to use Backbone, but I need to work one step at a time.)

• javascript
• browserify

2 Answers 2

You are very close!

First, the way to reference a module in the same directory is to say:

var myChart = require('./chart');

Without the leading path component, require will look in your npm package directory.

Second, you need to export the variables in the modules so that they can be used elsewhere. So your form module needs to look something like this:

var myForm = { 
  setup: function() { button.onclick(_this.getData(); },
  getData: function() { // on ajax complete, callChart },
  callChart: function() { myChart.setup(data); }
};
myForm.setup();
module.exports = myForm;

I just finished struggling with this error for a while, I'll post my solution in case anyone else runs into the same issue I did. It seems that Browserify sometimes can't find local modules depending on where the require goes. This code didn't work:

window.Namespace = {
  foo: new require('./foo.js')()
};

but this worked fine:

var Foo = require('./foo.js');

window.Namespace = {
  foo: new Foo()
};