I’m wondering whether there has been any successful usage of Aurelia with the parcel.js bundler? I see there is a discussion thread on here about making Aurelia bundler friendly, but I was curious about whether, at present, parcel.js and Aurelia could be used together as things stand? has anyone tried and succeeded?
I’m in the process of attempting to do this, but I’m not getting very far, I’ve managed to get everything bundled but whenever I run my site I get an error about PLATFORM.loader not being defined. So I’m wondering whether I should carry on trying or rather switch to Webpack?
PLATFORM.loader is the abstraction of module loading API for Aurelia to run on top of various module loaders.
Currently, Aurelia supports requirejs (or any AMD module loader) and SystemJS through aurelia-loader-default, and supports webpack through aurelia-loader-webpack. That’s why Aurelia doesn’t work with parcel.js or browserify yet.
It’s quite easy to create your own loader - take the one for the fusebox as a base and modify it for parcel. I’ve done so for SFX SystemJs bundles and it did not take long.
The problem with parcel is, that it does not load dependencies at runtime. Dependencies have to be statically parsable at compile time even for dynamic imports import().
So loading the corresponding .html template automatically from a viewmodel wouldn’t work. Importing it explicitly would work, but requires you to apply the returned template explicitly by using @template(loadedTemplate). But eventually it does not work as well, because html seems to be treated not as module. On the other hand, if you import the template explicitly, you would be free to use other html dialects as well, but I didn’t test this.
Using an inline template @view("<template><p>WORKS</p></template>") works. Although dynamically loaded dependencies from the template would again not work. But since june (see blogpost) it is possible to load dependencies as modules, so this is not a showstopper as well.
Bootstrapping has to be done manually as well, because aurelia-app="src/main" is not picked up as a dependency from parcel. But this a single line of code, again no showstopper.
HMR does not really hot reload. When a module is changed, Parcel executes the changed module and every parent of the changed module. So eventually it executes the bootstrapper, which replaces the stale aurelia app with the updated aurelia app. So your code changes are applied and in effect, but the state of the previous app is lost. There is a aurelia-hot-module-reload, but I didn’t get it to work with parcel. It seems it is only supposed to be used with webpack. At least only webpack is mentioned in its readme file.
In other words, I have aurelia running with parcel in a POC. Apart from the mentioned restrictions, it works quite well. I try to get something up on github and npm asap. I would be glad to receive some help, because I am not to well versed in the internals of aurelia nor in parcel.
Hey Thomas,
I’m currently also trying to figure out how to use aurelia together with parcel. Did you actually put your working demo somewhere on github? I would be glad to have a working example (even though it might be outdated).
Hi mojo2012,
I never had the time to improve my test with aurelia and parcel. But since it worked in a way, I put it on github now. By now it is heavily outdated, maybe you can update it. You can find it here: https://github.com/tmueller/aurelia-parcel-test. Hope it helps
