Getting started with the browser: importing local files?

Question

I have prototyped a JavaScript application, and now I want to move on to more robust configuration using a browser and managing dependencies with a requirement.

I currently 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, and chart.js looks like this:

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

and form.js as follows:

 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 shown below:

 <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 port this to a more modern setting using a browser.

I deleted the vendor directory and instead created the index.js and 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 ran npm i --save highcharts-browserify and npm i --save jquery and saved these modules to package.json and installed them in node_modules . I also added a build task to package.json : browserify index.js -o bundle.js . And in my interface template, I know that I have:

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

So far so good.

My question is what to put in my index.js file, because I'm not sure how to import the files that I already have. So far I have 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 seems that the request does not know how to find this file, or how to import it, which is not surprising given that this is a complete hunch from my side.

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

(NB: In the end, I want to reorganize chart.js and form.js to use Backbone, but I need to work one step at a time.)

Answer 1

You are very close!

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

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

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

Secondly, you need to export variables to modules so that they can be used elsewhere. Therefore, your form module should 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; 

Answer 2

I just finished fighting this error for a while, I will post my solution if someone else encounters the same problem as me. It seems that Browserify sometimes cannot find local modules depending on where the require goes. This code did not work:

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

but it worked fine:

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