Further front-end build cleanup

[thibaudcolas]

Follow-up from #43

• Switching from yarn to npm. No other Wagtail project uses yarn.
• Removing the unused dependencies from the package.json (I couldn’t see http-server or popper.js being used, and Underscore doesn’t seem to actually do anything)
• Splitting dependencies and devDependencies, so we have an easier time telling what’s actually used by the theme
• Combine Webpack entry points into a smaller number of files #171
• Stylelint basic setup #170
• Set up Prettier #169

[tbrlpld]

Popper is used by bootstrap for certain elements. Not sure we are using any of them.

[lb-]

Should also try to adopt our shared linting packages if not already in use.

[PaarthAgarwal]

Which ones should be present in devDependencies?

[lb-]

Anything that is client facing should be in dependencies. Anything that relates to the building of the project (Webpack) or working with code that gets transformed before the final build (babel, sass) should be Dev.

But check each one gets used also.

"@fortawesome/fontawesome-free": "^5.13.0", non-dev
"autocompleter": "^6.0.3", non-dev (I think)
"babel-loader": "^8.2.2", DEV
"bootstrap": "^4.4.1", non-dev
"copy-webpack-plugin": "^8.0.0", DEV
"css-loader": "^5.1.2", DEV
"file-loader": "^6.2.0", DEV
"jquery": "^3.5.1", non-dev
"mini-css-extract-plugin": "^1.3.9", DEV
"popper.js": "^1.16.1", non-dev (or not needed)
"sass": "^1.32.8", DEV
"sass-loader": "^11.0.1", DEV
"stylelint": "^13.3.3", DEV
"underscore": "^1.10.2", non-dev
"webpack": "^5.24.4", DEV
"webpack-cli": "^4.5.0" DEV

[lb-]

We should also update the package JSON version to match the release version (need to ensure the release instructions includ that).

And add to the list for this issue (or a seperate one) - basic JS unit tests.

[PaarthAgarwal]

We should also update the package JSON version to match the release version (need to ensure the release instructions includ that).

Currently it says "version": "1.0.0". Should it be updated to 2 .0.0 or 3.0.0?

[PaarthAgarwal]

Anything that is client facing should be in dependencies. Anything that relates to the building of the project (Webpack) or working with code that gets transformed before the final build (babel, sass) should be Dev.

But check each one gets used also.

"@fortawesome/fontawesome-free": "^5.13.0", non-dev "autocompleter": "^6.0.3", non-dev (I think) "babel-loader": "^8.2.2", DEV "bootstrap": "^4.4.1", non-dev "copy-webpack-plugin": "^8.0.0", DEV "css-loader": "^5.1.2", DEV "file-loader": "^6.2.0", DEV "jquery": "^3.5.1", non-dev "mini-css-extract-plugin": "^1.3.9", DEV "popper.js": "^1.16.1", non-dev (or not needed) "sass": "^1.32.8", DEV "sass-loader": "^11.0.1", DEV "stylelint": "^13.3.3", DEV "underscore": "^1.10.2", non-dev "webpack": "^5.24.4", DEV "webpack-cli": "^4.5.0" DEV

I think we should keep popper.js. Maybe we are not using it right now but it is possible that one day we'll use something from bootstrap that requires popper. We can remove underscore though as Thibaud suggested.

[lb-]

I would opt for removing popper personally, we can always add it if we need it.

[lb-]

Actually - ignore that package version thing, that is probably just unhelpful and creates confusion.

[PaarthAgarwal]

I would opt for removing popper personally, we can always add it if we need it.

Sure

[lb-]

Last three items have been split to their own issues.

• Set up Prettier #169
• Stylelint basic setup #170
• Combine Webpack entry points into a smaller number of files #171

Rest has been done, thanks everyone!