Aurelia... Webpack-less-ly?

Best Practices
1

Please, I’ve had it, I am done with webpack, and I don’t feel like I am alone (see: [https://medium.com/@jhabdas/webpack-is-your-achilles-heel-d3cd80821a4f](http://webpack achilles heel) for one). There’s got to be a better way, things used to be so simple before this and the ONLY reason I am even attempting to use it (because believe me, I have better ways to manage JS/CSS assets) is because it seems like Aurelia is requiring these “bundle loaders” just to get the Aurelia JS up and running into the browser. I’ve now been messing and “learning” webpack for 2 months, and there is still no way to do what I need to do (multiple versions of Bootstrap need supported as we transition the site from old to new).

Please, is there some way I can just download the Aurelia bits via NPM and include the JS files manually using my own methodologies? I may need to explain… what I am trying to accomplish is a NON-SPA “app” right now. I do not need anything except simple “modules” (1 page/view, core dependencies [jquery, bootstrap, Aurelia]).

1 Like
2

(multiple versions of Bootstrap need supported as we transition the site from old to new).

What is the plan to achieve this? bootstrap is a legacy lib and it only points to global jquery, it feels pretty difficult to do without having some advanced dependency resolution.

3

Please, is there some way I can just download the Aurelia bits via NPM and include the JS files manually using my own methodologies? I may need to explain… what I am trying to accomplish is a NON-SPA “app” right now. I do not need anything except simple “modules” (1 page/view, core dependencies [jquery, bootstrap, Aurelia]).

Do you need routing capability? If not, I may have something for you.

4

I guess I am just flustered, but let me explain the “stack”:

  • Visual Studio 2017 (Community)
  • ASP.NET Core 2.1
  • TypeScript (if I can, otherwise not needed)
  • This will be deployed to IIS7 (if that makes a difference)

I have used the SPA Template from the ASP.NET Core repo to see how it was setup (obviously with webpack for everything). It’s “runnable” but it doesn’t fit my needs.

No, I do not need routing. Basically, my plan is to just load the “global” dependencies (jQuery, Bootstrap 3 or 4 depending on the page) as they’ve always been done - as a script/style include. My guess would be then that I can just refer to these globals in any of my “page modules” since it will already be available (no “module loading”).

5

I see, so we can have something like this:

<!-- index.html -->
<head>
  ...
</head>
<body>
  <template id='app-element-template'>
    ...
  </template>
  <script src='aurelia.bundle.min.js'></script>
  <script src='index.js'></script>
</body>

// index.js
class App {
  static get $view() {
    return document.querySelector('#app-element-template');
  }
}
// there can be a bundle script that export all export of Aurelia in a global namespace like `au`
// so it can
const aurelia = new au.Aurelia();
aurelia.use.standardConfiguration();
aurelia
  .start()
  .then(() => aurelia.setRoot(App, document.body));

Is the above what you want?

My .02$: Unless each page of the app is manage-able, and not going to pull in bunch of script files, doing it this way is undesirable, from code compilation (or transpilation) for older browsers ie. IE11, from dependency management, encapsulation to separation of concerns.

6

Also if you found the setup of any template is too complicated, there is this setup that tries to stay simple and includes pretty much nothing https://github.com/questmetrics/aurelia-webpack-bare

The development cycle is based on the execution of npm run build:watch, it will basically rebuild all code to dist folder (configurable) , and only script part. Then in view.aspx, those bundle can be simply linked with out too much pain. (With the removal of HtmlWebpackPlugin, which is this block https://github.com/questmetrics/aurelia-webpack-bare/blob/master/webpack.config.js#L40-L42)

7

Thanks, I’ll look this over tomorrow. I understand the need for these bundles, and how webpack is managing the dependencies, but the fact that you cannot control how and where things will be bundled (except to one, and ONLY one output in webpack) to me, makes it inflexible. I have started down a road now where I may have to eventually end up having “webpack.config.js” files riddled all through my projects folder structures just to manage the outputs into different files (because in some cases, transpiling is necessary, ONCE and only once).

I really don’t know why the author didn’t just go with a very simple structure in the webpack.config so that you could just specify something like:
…
bundles: [
‘jQuery’: { include:[jquery, jquery.validate, etc.], output: ‘./wwwroot/dist/jquery-bundle.js’, loaders: […] },
‘bootstrap’: { include: [popper, bootstrap, etc.], output: ‘’, loaders: […]},
etc…
]

Not only would it be so much more concise, it would actually make sense, and more than one output could be used so that there really would be no difference between code-splitting and bundling. But, I guess that’s what we get for using a tool designed to help a problem for facebook / react development.

8

There is a config for what you want with those, are you aware of external? https://webpack.js.org/configuration/externals/

9

I had just run across “externals” yesterday as well, it may work for my scenario.

10

Have a look at the following template

It’s a good starting point for asp.net+webpack. You barely need touch webpack config at all

2 Likes
11

I’ve had problems with Webpack not working well with Net Core and would ideally like to see a Core Aurelia (including basic features such as routing) that doesn’t need Webpack to startup the application in the client browser. Would this be possible?

12

It will be possible. I’m working towards it. It depends on how fast we can iterate in router and templating-router modules

13

Here is the PR that helps with using Aurelia the script tag jquery way. https://github.com/aurelia/script-tag/pull/11 @TimMc

14

I’ve updated the PR, and you can see how to use it in a very jquery way, in the example of this comment https://github.com/aurelia/script-tag/pull/11#issuecomment-429827981

1 Like
15

Hi @bigopon, I haven’t had time to work on this until now, I’ll look over this to see how it helps. I am also interested in what @lvparkington mentioned as well.

16

Thanks @MaximBalaganskiy, but Webpack and how it works is fine for me. Where it falls short is that it makes a huge presumption that you are developing a “SPA” app, and that you will NEVER need multiple versions of a JS framework in an app. I had started down a road with a custom build script which would support webpack.config files under different “Areas” of the site so I could compile some pages using Bootstrap 2.3, and some with Bootstrap 4.0. In the end, it was a huge headache.

So, my issue is not a “starting template” for .NET Core… it’s how do I use Webpack (or something else entirely) to support an enterprise app where you have to transition slowly some pages of the app while leaving older pages on older versions (i.e. Boostrap/jQuery) without so much hassle. Example - without starting a whole new project, how would a developer slowly migrate a “knockout/jQuery/Boostrap2” project, and migrate SOME pages to a “Aurelia/jQuery/Bootstrap4” project? You can’t - Webpack hijacks the whole project and takes over everything.

17

I would create a separate file with configure function for each upgraded page and have them as entry points for webpack. This will create several bundles which can be referenced from those transformed pages. The only difference in those entry points would be setRoot parameter.

18

What do you think of “StealJS”? I am beyond frustrated with webpack, and realizing that a lot of devs I talk to with large apps have gone back to gulp/grunt. I understand the “potential” webpack has, but it’s doing so many things, in my opinion, that are inflexible, not maintainable, and I do not have time to learn “tooling” for 6 months to get something working. As a matter of fact, the “bundling” utils in ASP.NET MVC6 are WAY better than webpack.

19

Give the Module tracer from the CLI a try. It should pretty much solve your issues.

1 Like
20

@TimMc Gulp/grunt are not bundlers, so I’m not sure about those. As for the webpack, I think you’re exaggerating a bit. There is plenty examples out there with good webpack configuations. It would be interesting to hear what specific problems you’ve got which need constant webpack related attention. I personally barely touch webpack.config.js in my work projects…