title: How to handle prototype chaining with browserify?
body: <p>I have JavaScript files like this:</p>
  
  <p>shape.js</p>
  
  <pre><code>    var shape = (function() {
          var shape = {};
          Object.defineProperty(shape, 'init', {
              value: function(x, y) {
                  this.x = x;
                  this.y = y;
                  return this;
              }
          });
          return shape;
      }());
  </code></pre>
  
  <p>circle.js</p>
  
  <pre><code>    var circle = (function(parent) {
          var circle = Object.create(parent);
          Object.defineProperty(circle, 'init', {
              value: function(x, y, r) {
                  parent.init.call(this, x, y);
                  this.r = r;
                  return this;
              }
          });
          return circle;
      }(shape));
  </code></pre>
  
  <p>rectangle.js</p>
  
  <pre><code>    var rectangle = (function(parent) {
          var rectangle = Object.create(parent);
          Object.defineProperty(rectangle, 'init', {
              value: function(x, y, width, height) {
                  parent.init.call(this, x, y);
                  this.width = width;
                  this.height = height;
                  return this;
              }
          });
          return rectangle;
      }(shape));
  </code></pre>
  
  <p>rectangle-with-text.js</p>
  
  <pre><code>    var rectangleWithText = (function(parent) {
          var rectangleWithText = Object.create(parent);
          Object.defineProperty(rectangleWithText, 'init', {
              value: function(x, y, width, height, text) {
                  parent.init.call(this, x, y, width, height);
                  this.text = text;
                  return this;
              }
          });
          return rectangleWithText;
      }(rectangle));
  </code></pre>
  
  <p>I also have other JavaScript files like constants.js, customErrors.js, validator.js, player.js, renderer.js, game.js, initializator.js, main.js in the same coding style.</p>
  
  <p>Now I want to do some collision detection with <a href="https://github.com/jriecken/sat-js" rel="nofollow">a simple JavaScript library for performing 2D collision detection</a> but I must type somewhere</p>
  
  <pre><code>    var SAT = require('sat');
  </code></pre>
  
  <p>I typed this in the global scope. (I know I am polluting the global scope with my shape, circle, rectangle etc. but I am still a junior and this is my best solution so far:)</p>
  
  <p>The problem is that I must use browserify or some other similar framework which provides 'require', and I am not familiar with 'require' yet and how I must organize my code around it.</p>
  
  <p>I installed browserify globaly and I also installed uniq in my project as well as sat (what I want indeed)</p>
  
  <p>Now I believe I have to type a command like this:</p>
  
  <p>browserify constants.js game-errors.js validator.js shape.js circle.js triangle.js rectangle.js rectangle-with-text.js player.js renderer.js game.js initializator.js main.js -o bundle.js</p>
  
  <p>But when I reference bundle.js in my html file and I run the browser I get this errror in the console:</p>
  
  <pre><code>    Uncaught ReferenceError: shape is not defined
  </code></pre>
  
  <p>which points to the code where I try to build circle, which means that my IIFE for the circle cannot see shape.</p>
  
  <p>So what should I do in order to make browserify to build my bundle properly?</p>