Question: Creating multiple bundles for external modules with shared dependencies

[Elliot Justice]

I have an example project structure where are all files are external modules. I would like to create two bundles for it, one for the store module and one for dashboard. Both store and dashboard have a shared dependency on user, but I do not want user to be put in to both bundles. How can I configure user to be included in only one? Also, how can I exclude items like third-party dependencies (i.e jquery) from a bundle when they are included via //reference in the source files?

Project structure

|-dashboard   
   |- dashboard-config.ts
   |- widgets   
       |- widget-one.ts
       |- widget-two.ts
|-user
    |- user-profile.ts
    |- user-preferences.ts
|-store
    |- shopping-cart.ts
    |- checkout.ts

[Todd Thomson]

@sparticus37 The answer to your questions is totally dependent on which module loader you are using. However, I will assume that your tsconfig.json "target" is "es5" and the "module" is "amd".

1. external third party libraries like "jquery" are not included in bundles. These are loaded by requirejs separately. Usually these are optimized into a single package using the require optimizer.

2. You will need to use 2 tsconfig.json projects to split your solution. 1 would bundle your user and say dashboard. The other would bundle only the store. The tsconfig.json to bundel the store would need to include a user.d.ts to resolve the external dependencies. The user.d.ts could be generated from a 2nd bundle with the dashboard + user project.

3. When using tsconfig.json project files it is unnecessary to use /// references just include the d.ts files into the project ( or group all your /// references into a single file and include it in your project.

It is difficult to give you an exact solution as I don't know all the dependencies in your code. This should give you a good start though.

I hope that helps!

[Elliot Justice]

Thanks @ToddThomson that helps a alot!

One thing I noticed after building TsProjectTodoMVC is that the generated bundle includes angular in it. Is the because the "app" bundle includes references.d.ts which has ///references in it, or am I missing something?

[Todd Thomson]

@sparticus37 /// references are only used by Typescript to resolve the Type information in the 3rd party external library. It is up to the your app to make sure the library is loaded and is available to your app.

In the case of TsProjectTodoMVC, when the gulpfile.js build task is run it uses the requirejs optimizer to package everything up into a single script.

TsProject is used to bundle separate typescript ES6 modules/files into a single bundle. Further down in the build pipeline you can combine external libraries (like angular), your TsProject bundles, etc. into a single script file using your module loader ( requirejs in this case ) optimizer.

[Elliot Justice]

Ah I see, thanks for the clarification.