projext plugin for Aurelia on webpack
Allows you to bundle an Aurelia project with projext using the webpack build engine.
Introduction
projext allows you to configure a project without adding specific settings for a module bundler, then you can decide which build engine to use. This plugin is meant to be used when you are bundling an Aurelia application and you are using the webpack build engine.
The plugin basically follows the instructions from the Aurelia webpack skeleton example, configures Aurelia entry point the Aurelia webpack plugin.
It also adds a few extra functionalities:
aurelia-extract-clean-loader: To avoid duplicated CSS (on the JS and CSS) when usingmini-css-extract-plugin.babel-plugin-transform-class-inject-directive: To be able to use theinjectdirective on classes.
Information
| - | - |
|---|---|
| Package | projext-plugin-webpack-aurelia |
| Description | Allows you to bundle an Aurelia project with projext using the webpack build engine. |
| Node Version | >= v10.13.0 |
Usage
You first need the build engine, so install projext-plugin-webpack.
Now, if your target entry file imports aurelia-framework or aurelia-pal, projext will automatically set the target framework property to aurelia; otherwise you'll have to do it manually.
Finally, on your target entry file:
export const configure = (aurelia) => {
...
}
Done! Just configure your Aurelia plugins/components and run your target!
Default HTML
If you didn't create an HTML file for your Aurelia app, projext will automatically create one for you, and then this plugin will take care of updating it so you can run your app right away.
There are some options you can change in your target settings in order to customize the way the HTML generated; you just need to add a frameworkOptions property on your target:
{
frameworkOptions: {
title: null,
useBody: true,
}
}
title: A custom title for the HTML file. By default, projext, uses the name of the target.useBody: Whether to add theaurelia-appattribute and the directives on the<body />or on a<div />inside it.
Development
Yarn/NPM Tasks
| Task | Description |
|---|---|
yarn test |
Run the project unit tests. |
yarn run lint |
Lint the modified files. |
yarn run lint:full |
Lint the project code. |
yarn run docs |
Generate the project documentation. |
Testing
I use Jest with Jest-Ex to test the project. The configuration file is on ./.jestrc, the tests and mocks are on ./tests and the script that runs it is on ./utils/scripts/test.
Linting
I use ESlint to validate all our JS code. The configuration file for the project code is on ./.eslintrc and for the tests on ./tests/.eslintrc (which inherits from the one on the root), there's also an ./.eslintignore to ignore some files on the process, and the script that runs it is on ./utils/scripts/lint.
Documentation
I use ESDoc to generate HTML documentation for the project. The configuration file is on ./.esdocrc and the script that runs it is on ./utils/scripts/docs.