Exploring Typescript Internal and External Modules and Webpack
Lately, I’ve been trying to upgrade the code base for a personal project with some legacy code in it. Specifically, it’s a web application built with Typescript that:
- Contains a manually injected <script> tag in the index.html file for each JavaScript file loaded (i.e. JavaScript files are not bundled using Browserify or Webpack)
- Doesn’t leverage CommonJS modules (instead, there are globally namespaced variables)
The purpose of this post is to discuss some of the lessons I learned when transforming the code base from using legacy features to using some better Typescript features. Specifically, I’ll highlight the difference between Typescript internal and external modules, as well as explain the benefit of using a module bundler like Webpack.
Starting Scenario
For the purpose of this case study, I’ll create a starting point that mimics the project I was working on but simplified for our purpose. I’ve created a Github repo for it — you can see it here (be sure to check out the “no-bundler” branch).
I’ll go ahead and re-produce the 4 main files below as well:
