Projext-plugin-webpack-aurelia NPM

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 using mini-css-extract-plugin.
babel-plugin-transform-class-inject-directive: To be able to use the inject directive 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 the aurelia-app attribute 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.