Home » Nodejs » including js files with html and node.js

including js files with html and node.js

Posted by: admin January 30, 2018 Leave a comment

Questions:

I am performing messaging via websockets between a HTML5 client and server running on node.js. Naturally I chose JSON as the message format and as such created common javascript code, defining the various message content types and transformation operations. The javascript code is shared between both projects.

I created my web client as one git project and my server as another git project. Partly because I am using phonegap to build a webkit based client for various touch based environments. It’s also a nice separation of the various logic.

To share the common code I created a separate project for the common logic and used git’s subprojects to ‘import’ the code into the other two projects.

Now this works fine for the html5 based project, as I can just do the following to include the code:

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

However with node I’ve had problems trying to get the code. to get the code, I’ve ended up doing the following:

var fs = require('fs');
eval(fs.readFileSync('./common/js/comms.js').toString());

While the approach I have taken works, I’ve noticed that it’s starting to get very messy when I have dependencies (as in, I need x.js, y.js and x.js if I want a.js), and I have to do it for every single node.js js file that wishes to use any of these entities.

I’m also not comfortable using the eval approach. I don’t have a security issue with it, though I would like to use strict mode and it’s my understanding that eval and strict mode go together like oil and water.

So my question is, what is the best method to include shared js files between html projects and node.js projects? I would prefer something that follows strict.

I should note that while there are several questions that are kinda around this topic, I could not find any that address the specific issues I’m raising. I should also add that I do not wish to ‘serve’ the files from the ‘server’. The HTML5 client is to be ‘standalone’.


To clarify, what I have in the ‘common js files’ is something like the following:

var Comms = function (options) {
   ...
}

In HTML5 I can then just reference is via new Comms(), which is what I desire to do in node.js as well.

Answers:

Have you researched how Node modules work? If you’re developing using this pattern, it’s fairly simple to use require('./common/js/comms') on the server while still including it on your client as well.

This article should point you in the right direction: http://caolanmcmahon.com/posts/writing_for_node_and_the_browser/


The following is the code that Tyler linked to in his comments below.

The example (example.js):

if(typeof exports == "undefined"){
    exports = this;
}

Example = function() {
    this.init();
};

Example.prototype = {
    init: function() {
         console.log('hello world');
    }
};

exports.Example = new Example();

The node.js usage of example.js (app.js):

example = require('./example');

The html usage of example.js (index.html):

<html>
    <head>
        <title></title>
    </head>
    <body>
        <script src="./example.js"></script>
    </body>

The change by the OP was to assign exports.Example to Example instead of to an new instance. Thus the node.js logic can use the following:

var Example = require('./example.js').Example;
var foo = new Example();

Thus the original question is solved.

Questions:
Answers:

Take a look at nodeJS modules.

Would be in comm.js:

module.exports = function(/* any dependency? */){
   // things
   // you can return some object
}

In the files you need comm.js

require('./common/js/comm.js')();
// or you can assign it to a variable if it returned something

Hope that helps!