title: Import Custom Javascript Objects Into React/ES6 Ecosystem
body: <p>I have some old custom javascript objects in files from a previous project and I want to import and use those in a new project that is built with React 0.14.x and ES6 conventions. There is so much of the old code that I do not want to touch any of that. It looks something like the following:</p>
  
  <p>myCustomObjectOne.js:</p>
  
  <pre><code>function myCustomObjectOne() {
      this.some_attribute = '';
      this.another_attribute = [];
      etc.
  }
  
  myCustomObjectOne.prototype.someMethod = function() {
      // do stuff
  };
  </code></pre>
  
  <p>There are a handful of files in a similar pattern that define other custom objects.</p>
  
  <p>Would I have those files somewhere and then in one of my React Component files do something like:</p>
  
  <pre><code>import myCustomObjectOne from '/path/to/file/myCustomObjectOne.js'
  import myCustomObjectTwo from '/path/to/file/myCustomObjectTwo.js'
  </code></pre>
  
  <p>Also, let's say in my old project I was using <a href="http://paperjs.org/" rel="nofollow">paperjs</a> or any third party library for that matter. I am referring to global objects from that library in <code>myCustomObjectOne.js</code>, so for example, making calls like <code>paper.activate()</code>. However, in my new project I just have a package manifest that has paperjs as a dependency that gets bundled with webpack and in a React Component I have: <code>import paper from 'paper';</code>. My old files no longer have access to the global <code>paper</code> object since before I was just including the vendor file in a <code>&lt;script&gt;</code> tag.</p>
  
  <p>Am I making this too complicated? Should I not try and import/bundle my old files but rather in my html file just add <code>&lt;script&gt;</code> tags and have my old files completely separated from my React code? My old JS objects are not views and do not really interact with the DOM, they pretty much just manipulate the third party library (which in-turn is self-contained in a canvas element).</p>