title: TypeScript and ES Modules - Do I even need rollup/webpack?
body: <p>I have an old TypeScript web application that references everything through Script Includes on the HTML page, so everything is declared in the global namespace.  The TypeScript code uses TypeScript's modules -</p>
  
  <p>myclass.ts:</p>
  
  <pre><code>module MyModule {
    export class MyClass {
   }
  }
  </code></pre>
  
  <p>someotherfile.ts</p>
  
  <pre><code>let myInstance = new MyModule.MyClass(); // globally available
  </code></pre>
  
  <p>All TypeScript is written to a single file using "outFile" in tsconfig.json, which can be problematic with globals and the order things are written.</p>
  
  <p>I use Visual Studio, which has TypeScript support built in. When you build the solution, it builds the TypeScript.</p>
  
  <p>I want to update the code to using modern ES6 Modules:</p>
  
  <p>myclass.ts:</p>
  
  <pre><code>export class MyClass {
  }
  </code></pre>
  
  <p>someotherfile.ts</p>
  
  <pre><code>import { MyClass } from "./myclass";
  let myInstance = new MyClass(); 
  </code></pre>
  
  <p>I initially thought I would need to use a third party library such as webpack or rollup to make this work, however looking at the JavaScript generated by the TypeScript compiler, it looks like it should just work to continue using "outFile" - everything is wrapped in modules so shouldn't be globally available:</p>
  
  <pre><code>Object.defineProperty(exports, "__esModule", { value: true });
  var MyClass = /** @class */ (function () { ..}());
  exports.MyClass = MyClass;
  </code></pre>
  
  <p>If I were to use rollup or webpack, I was a bit confused on how this would work with Visual Studio running its own tsc process - most examples seem geared toward VS Code which utilizes the npm typescript compiler.</p>
  
  <p>Anyways, am I missing something? Is there any reason I can't skip using webpack or rollup? </p>