Saturday, February 9, 2019

Making use of modern JS / LESS in a ASP.NET Core (Razor Pages) project?

A lot of the ASP.NET Core templates have some kind of bundler build-in, simply because it's neccesary for them.
For example with Angular you get TS to JS transpilation and bundling out of the box.
Using LESS / SCSS is accomplished with a single setting.
You change a SCSS file and the browser refreshes for you, your change is shown instantly.

Now I'm trying to accomplish the same with a ASP.NET Core project that uses Razor Pages.
I've managed to use Gulp alongside gulp-less to get LESS to CSS compilation going.
Installed a browserlink nuget package and added some configs to get Browserlink working (reload browser on change).

But now I've hit a bit of a wall. The final frontier: Adding Typescript support.
I've managed to get compilation going but it doesn't process my "Require" statements into code the browser understands.
Also my code doesn't become 1 file, rather it becomes a bunch of files.

Now I've look into why and apparently I need a final "bundling" step.
And this is where it gets tricky....

There's so many of them, jesus christ.
Browserify, webpack, parcel, rollup, a dozen of webpack loaders, 50 gulp plugins...

To arrive at my question:

What do you guys use in your ASP.NET Core (non-spa) projects to get modern JS working?

All I'm really trying to accomplish is:
- Being able to to use ES2015
- Being able to use NPM packages in my project
- Bundling them into 1 file
- Minification

Is there no straight forward way to get this done?

Making use of modern JS / LESS in a ASP.NET Core (Razor Pages) project? Click here
  • Blogger Comment
  • Facebook Comment

0 comments:

Post a Comment

The webdev Team