title: How to make TypeScript output valid ES6 module import statements?
body: <p><a href="http://caniuse.com/#feat=es6-module" rel="noreferrer">All major browsers</a> have supported ES6 modules for some time.</p>
  
  <p>These differ from many of the server-side approaches in that they need to specify the exact file to import from - they can't use file discovery.</p>
  
  <p>This makes sense - in Node applications or bundlers like WebPack they only really need the name of the module, and then can spend a bit of extra time discovering the specific file that holds the code. On the web that could be a lot of wasted round trips (is <code>'library'</code> in <code>library/index.js</code>, or  <code>library/library.js</code>, or <code>library.js</code>? <code>require()</code> doesn't care but on the web we have to).</p>
  
  <p>TypeScript has ES6 modules support (set <code>"module": "es6"</code> in <code>tsconfig.json</code>) but it appears to be using a file discovery approach...</p>
  
  <p>Suppose I have <code>library.ts</code>:</p>
  
  <pre><code>export function myFunction(...) {  ... }
  </code></pre>
  
  <p>Then in <code>app.ts</code>:</p>
  
  <pre><code>import {myFunction} from './library';
  var x = myFunction(...);
  </code></pre>
  
  <p>However, this is unchanged when transpiles - the TS output still has the <code>'library'</code> name for file discovery, which doesn't work. This throws an error because <code>'library'</code> isn't found:</p>
  
  <pre><code>&lt;script type="module" src="app.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>In order for ES6 modules to work the TS output needs to reference the specific file:</p>
  
  <pre><code>import {myFunction} from './library.js';
  var x = myFunction(...);
  </code></pre>
  
  <p><strong>How do I make TS output valid ES6 module <code>import</code> statements?</strong></p>
  
  <p>Note: I am <em>not</em> asking how to make a bundler join the TS output into a single file. I specifically want to load these files individually using <code>&lt;script type="module"&gt;</code></p>