title: How to compile npm package from src (source) for both lib (module) and dist (browser)?
body: <p>I'm writing a small class object in JavaScript that I wish to be able to use both for node applications but also as a standalone browser JavaScript file. </p>
  
  <p>I think I've found a solution, but I'm not really sure if that's how it's supposed to be.</p>
  
  <p>Let me try to explain how the directory looks. </p>
  
  <p>Ok, I've got my main file inside a directory called src/index.js. 
  This file consists of a simple ES6 Class, which I export with ES6 export (following AirBnb Use Import/Export). </p>
  
  <pre><code>export default Person class {
  
      constructor() {
      // some code here...
      }
  
      getExampleMethod() {
      // some code here...
      }
  
  }
  </code></pre>
  
  <p>Okay. So this code will not run in the browser because browsers do not support "export default" and it's ES6 so I should transpile it to ES5 using Babel. </p>
  
  <p>But using Babel with --presets=es2015 will not cut out the "export default" so browsers will still throw an error. So I solved this using a package called "replace" which simply search and replaces that string before transpiling it using Babel.</p>
  
  <p><strong>In my package.json it looks like this:</strong> </p>
  
  <pre><code>"build:dist": "babel src -d dist --no-babelrc &amp;&amp; replace 'export default ' '' dist/index.js &amp;&amp; babel dist -d dist --presets=es2015",
  </code></pre>
  
  <p>So basically first moving the file, then removing the "export default " line, and the transpiling it... And this works!</p>
  
  <p>For the lib directory I do this: </p>
  
  <pre><code>"build:lib": "babel src -d lib --plugins=add-module-exports,transform-es2015-modules-commonjs",
  </code></pre>
  
  <p>So basically move the file and transpile it, adding "module exports" and into a "commonjs" module.</p>
  
  <p>This works... But it does not really feel like the way to do it? I've tried using Browserify, Webpack etc, but when doing that, I do not seem to be able to initiate a new object from my class? It gives me an error message saying "new Person()" is not defined or something similar to this.</p>
  
  <p>How am I suppose to write my source code in plain ES6 style, transpiling it to both to be used in the browser and for node usage, while being able to have an API that looks like this: "var person = new Person();"?</p>
  
  <p>Really, my question is maybe more aimed to be: How do I turn src/index.js into both browser and node compatible files?</p>
  
  <p>Thanks a lot!</p>