试图让一个JavaScript文件在node.js文件和浏览器中都可用

Question

I've got a relatively simple JavaScript file (call it foo.js) that has 3 functions that are being called by a second JS file in the browser. There are a few other functions in foo.js, but they are only used internally.

Now foo.js also needs to be able to be used by a JS file running in node.js. Same thing, only needs to access the three basic functions.

So I added module.exports around these three functions like so:

module.exports = {
    init_foo: function (bar){
        return JSON.parse(bar);
    },
    export_foo: function (foobar){
        return JSON.stringify(foobar);
    },
    switch_foo: function (boofar){
        switch(boofar)
        {
            case 'A':
                return 1;
            case 'B':
                return 2;
            default:
                return 3;
        }
    }
};

So now my node.js file can get the code by using

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

But of course the browser code can't use it anymore, gives an error. When looking for a solution I found browserify but I can't seem to get it to work (keeps returning an empty file even when doing the suggested tutorial, guessing it's something to do with the set up of the system I am using, just not sure what), and it seems like it's more complex then I need anyway (don't want to browserify the entire browser JavaScript code, but can't browserify foo.js, have to make a new JS file that requires foo.js and uses it then browserify that, effectively adding a middle man that wasn't needed before).

Seeing as how the code I want to access with both node.js and from the browser is relatively simple is there an easy way to do this? (Just writing the code twice isn't a solution, it is simple code but I want to only have to edit it once for changes to propagate to both locations).

Answer 1

It is probably the best to use a specialized packet like browserify but for a small thing like yours the following might be a better fit. (I used it in my primesieve module)

var myModule = (function() {
  return {
    init_foo: function (bar){
      return JSON.parse(bar);
    },
    export_foo: function (foobar){
      return JSON.stringify(foobar);
    },
    switch_foo: function (boofar){
      switch(boofar)
      {
        case 'A':
            return 1;
        case 'B':
            return 2;
        default:
            return 3;
      }
    }
  };
})();

if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
  module.exports = myModule;
} else {
  if (typeof define === 'function' && define.amd) {
    define([], function() {
        return myModule;
    });
  } else {
    window.myModule = myModule;
  }
}

There have been some time passed since and better methods might have evolved but it is small and simple and worked for me.

Answer 2

Welp, one thing you can do is only assign a property of 'module' if it exists. And hope that no other JavaScript has introduced that to your browser environment as a global variable.

(function() {
  var exports
  ...
  if (this.hasOwnProperty('module'))
    module.exports = exports
})()

Note that the this there is the global object.