How to create specific JS bundles when using TypeScript?

Question

We have an ASP.NET MVC application that has a lot of JavaScript code.

To cut down the amount of unnecessary JS loaded to the browser, we use the BundleConfig.cs file to generate multiple bundles. Then on the View, we have logic to say:

"If user can user Feature A, then include Bundle A"

So, not only does the end-user get only the JS that is pertinent to their requirements, the JS also only exists on the pages where it is relevant. This gives us the very easy way to initialize our code when the page loads:

$(featureA.init);

Migrating to TypeScript (current version 3.3) ...

In Visual Studio 2017, under the Project's TypeScript Build tab, I see a check-box "Combine JavaScript output into file:" where one can specify the file name (which can be used for bundling).

This gives me a single, site-wide JS bundle which would require me to give everyone everything.
The on-page-load event isn't a great option anymore because the JS file is available on pages that aren't relevant, and so the jQuery selectors that fire in the 'init()' function of course now complain about not finding certain objects in the DOM because the user's not viewing the relevant page.

Am I missing something? Can TypeScript in Visual Studion 2017 handle these requirements?

Yash · Accepted Answer · 2019-03-11 19:49:36Z

1

Use Webpack as your dependency bundler and that should do what you want it to do: https://webpack.js.org/guides/typescript/

It has some cool plugins like the CommonsChunkPlugin which can get you stuff that you want - like shared modules to make it light on the browser. Also, Webpack has some other plugins like ExtractTextWebpackPlugin and MiniCssExtractPlugin which will let you have only a selective piece from the larger bundle like you want it on your project.

answered Mar 11, 2019 at 19:49

Yash

515 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DrGriff · Accepted Answer · 2019-03-12 11:27:21Z

I investigated the answer provided by Yash and the webpack mentioned certainly looks like a very useful tool. Seems like you can do a lot with this, but I was left with the feeling that Visual Studio should do the basics....had I missed something?

I went back to my solution and, with a bit of tinkering, I managed to solve this without installing any additional packs.

First, I un-checked the check-box "Combine JavaScript output into file". One note here, although I un-checked it, my Visual Studio seemed to remember the value and a re-start of Visual Studio was required to clear its memory.

Secondly, I found the resultant *.js files that are generated when the *.ts files are compiled, and included those in my Visual Studio project.

Thirdly, I re-defined the bundles in the BundleConfig.cs file to utilize these generated JS files and then referenced them in the relevant views.

Then, when I published these, the bundles appeared as expected.

I suspect that the thing I was missing was including them *.js files in the Visual Studio project. I think that if they're not included then they're not published, and so can't be included in the bundling process.

Collectives™ on Stack Overflow

How to create specific JS bundles when using TypeScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related