protomorph

KO | EN

gitlite — search

#python #ai #typescript #llm #go #deep-learning #linux #docker #java #kubernetes #pytorch #ios #openai #open-source

(★ 9)

Shared build config for frontend applications

protomorph Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Protomorph: shared build
========================

Contains a standard build for working on svelte frontend applications based on rollup
using js and scss. Also contains configuration for js and scss linters.

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

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

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

```shell
yarn install
```

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

```javascript
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)

protomorph

protomorph Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

protomorph

protomorph Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README