Aurelia... Webpack-less-ly?


#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]).


#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


#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