Protomorph: shared build

Contains a standard build for working on frontend applications based on webpack using ts, js and scss. Also contains configuration for js, scss and html linters.

mkdir my-frontend-app
cd my-frontend-app
yarn init

Add this repo into the devDependencies in your package.json.

...
"@itslearning/protomorph": "git://github.com/itslearning/protomorph.git#TAG_NAME"
...

yarn install

You need to create a webpack.config.js and require the protomorph webpack configuration. It shouldn't require much.

const baseConfig = require('@itslearning/protomorph/webpack.config');

// You can override the protomorph webpack config here
const config = Object.assign({}, baseConfig, {
    entry: {
        'index': './src/index.js'
    }
});

module.exports = config;

Webpack configuration

Please read the webpack.config.js. We support svelte, js, ts and scss extensions.

You can override everything in the config, as you would any other js object literal.

Available plugins:

• mini-css-extract-plugin
• clean-webpack-plugin
• copy-webpack-plugin
• on-build-webpack
• optimize-css-assets-webpack-plugin

Order of build

• Removes existing dist folder
• Builds js, ts, svelte and scss
• Important: SCSS @import statements are only read once, to reduce the amount of CSS generated by components sharing the same dependencies.
• Deletes any unnecessary intermediate files created by webpack during build. For example, if you have bundled up SCSS using an index.scss webpack config entry point, webpack will leave behind a js file that it used during the SCSS build. These can be confusing and make it difficult to navigate your built files. Deleting these thm.bundle.js files is the default behaviour of the cleanUpThemeJsFiles plugin, which is built on top of the on-build-webpack plugin.

Karma test runner

Linting

For js, sass and html coding standards, provided are configs for:

• eslint (.eslintrc.json)
• sass-lint (.sass-lint.yml)
• htmlhint (.htmlhintrc)

For sass linting in the IDE, you will need to configure your workspace settings to use the lint files in this project.

You may find copying the linting files into your root folder easier to use.

TODO:

• Automate html linting (maybe https://www.npmjs.com/package/htmllint-loader)