title: Compile Typescript to native browser ES modules
body: <p>How can you compile Typescript to work with browsers that support <a href="https://jakearchibald.com/2017/es-modules-in-browsers/" rel="nofollow noreferrer">ES modules</a>?</p>
  
  <p>I'm using <code>&lt;script type="module"&gt;</code> with <code>module=es2015</code> in my tsconfig, but I can't write imports paths that work for the compiler and the runtime.</p>
  
  <p>The browser needs requires fully qualified import paths and Typescript <a href="https://stackoverflow.com/questions/34783953/why-does-typescript-compiler-not-change-ts-to-js">doesn't convert the import extension during compilation</a>.</p>
  
  <p>For example, the following snippet of TS doesn't change during compilation.</p>
  
  <pre><code>import foo from "./foo.ts";
  import bar from "./bar";
  </code></pre>
  
  <p>When it runs in the browser, it emits two network requests for files that don't exist.</p>
  
  <pre><code>GET foo.ts -&gt; (should be) GET foo.js
  GET bar -&gt; (should be) GET bar.js
  </code></pre>