Aurelia and parcel.js


#1

Hello!

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?

Thanks


#2

The short answer is NO.

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.


#3

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.


#4

I’m pretty interested in this. If you ever get a PoC in place please do share. Maybe I will find some time to contribute.


#5

Ah okay,

Thats unfortunate, I think given the time constraints, I will rather switch to webpack, thanks for the info though!


#6

Too bad then. I will probably attempt it myself.


#7

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.


#8

The limitations you mentioned are similar to webpack too.

If you want, have a look at https://github.com/aurelia/webpack-plugin which teaches webpack about aurelia’s conventions and dynamic loading.

Parceljs supports plugin too, you probably can get something rolling. But it is not a light task for sure.