CODEWITHSUNDEEP
javascripttypescriptwebpack
Eddi
Eddi

Reputation: 811

Gradually move from including each JS files to module bundling

In our AngularJS application we currently have a lot (400+) of files, which get included via <script>-tags. The order these files is something like this:

  1. AngularJS script files
  2. 3rd party plugins / modules
  3. business Logic files
    • modules
    • services
    • controllers / components / directives

We would like to move to a better approach utilizing a module bundler and TypeScript. New files are already written in TypeScript but don't make use of import/export. In order to make things easier, we could convert every JavaScript file into a TypeScript file and fix the resulting errors in a feasible time.

However, before we do this, we would like to have a viable strategy on how we could gradually make use of import/export. I'm thinking of something like rewriting one module from time to time, starting with modules deep down in the dependency tree.

However I was not able to achieve this, but I'm quiet sure that others already had to solve this before.

Upvotes: 0

Views: 193

Answers (1)

Matt McCutchen
Matt McCutchen

Reputation: 30919

Once you decide on a module bundler, you'll need to learn about its facilities for (1) allowing other JavaScript on the page to access things defined in the bundle and (2) allowing the bundle to access things defined by other JavaScript on the page. (If you're able to migrate in strict dependency order, you might never need #2.) For example, for Webpack, #1 would be the library* output options and #2 would be externals. Then just move the code into modules little by little, adjusting the configuration as necessary so that each part of the code has access to the things it needs from the other part of the code. Since Webpack only supports a single library export module, during the transition, you may have to maintain a dummy module that just re-exports all modules that you need to access from code outside the bundle. This is a little tedious and represents extra work that you wouldn't have to do if you migrated all at once, but you may decide it's worth paying that cost in order to be able to migrate gradually.

If you have issues getting type information from TypeScript module files in non-module TypeScript files, see this answer for a workaround.

Upvotes: 1

Related Questions