Migrating Aurelia CLI from requirejs to Webpack

The article Aurelia-CLI Bundler to Webpack gives the migration highlights, but is a little sparse on details. I ran into a number of head banger issues that were time consuming to resolve. A few of these are covered here.

Global Resources

Everything in your src/resources, where you keep your custom components, attributes and converters, and which I’m assuming you want to be made global, will need to have PLATFORM.moduleName() applied to the path. Here’s how to make that work when you’ve got a folder hierarchy to deal with.

In each individual folder create an index.js file that exports a default function to configure everything at and below that folder.

Components that are within that folder should be declared global using config.globalResources(PLATFORM.moduleName('./my-javascript-file')). If the component is a view file and does not require a javascript file, add the extension of the file. Here I am using pug and so I add the .pug` extension rather than a.html` extension.

For subfolders, do the same thing as here, and then import those default functions into this index.js and execute them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {PLATFORM} from 'aurelia-pal';

import account from './account/index';
import app from './app/index';
import login from './login/index';
import profile from './profile/index';
import standard from './standard/index';
import video from './video/index';

const configure = function (config) {
config.globalResources(PLATFORM.moduleName('./output-values.pug'));
config.globalResources(PLATFORM.moduleName('./sort'));
config.globalResources(PLATFORM.moduleName('./video-variants.pug'));
account(config);
app(config);
login(config);
profile(config);
standard(config);
video(config);
};

export default configure;

I created the module aurelia-resource-index to generate these index.js files automatically by walking the resources folder tree. The code includes support for excluding files that are listed in a .resourceignore file. If you follow the instructions and add a gulp task to your aurelia_project/tasks folder, you’ll be able to execute the geneartor by running au resource-list.

Of course you’ll have to add your resources, as before, to main.js, except this time you’ll need to use the PLATFORM.moduleName wrapper.

1
2
3
aurelia.use
.standardConfiguration()
.feature(PLATFORM.moduleName('resources/index'))

JQuery

If you’re using JQuery, you’ll see a "ReferenceError: $ is not defined unless you add the following to your webpack.config.js plugins array:

1
2
3
4
5
new ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),

Localisation

I’ll get to this later.

PUG

Since I am using pug, and pug is not yet a standard option with the Aurelia CLI, it required enough custom configuration to warrant it’s own blog post.