Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fieldmanager Webpack setup for JS and CSS minification #785

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

stevenslack
Copy link
Contributor

@stevenslack stevenslack commented Nov 17, 2020

This PR should serve as a springboard to using Webpack as a build system. This PR has the following characteristics:

  • Minification of JS files into the build directory
  • Minification of the CSS files into the build directory
  • Apply autoprefixer to CSS properties using PostCSS
  • Address existing NPM audit vulnerabilities

Future efforts may want to include:

  • style linting
  • Javascript linting
  • JS Unit tests with Jest
  • SASS integration
  • Babel integration

NOTE:
Currently, the CSS files in the entry points also generate a JS file in the build even if there is no associated JS file.

// postcss-preset-env includes autoprefixer
'postcss-preset-env',
{
browsers: 'last 2 versions',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may need to be adjusted but for the most cases the -webkit and -moz prefixes are added here with autoprefixer

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding this to package.json via the browserslist field (or a .browserslistrc file) instead so other tools like Babel can make use of it too. 🙂

https://github.com/csstools/postcss-preset-env#browsers
https://babeljs.io/docs/en/babel-preset-env

Copy link
Contributor

@montchr montchr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome stuff! 😄 Just a few questions and suggestions.

package.json Outdated Show resolved Hide resolved
package.json Show resolved Hide resolved
package.json Show resolved Hide resolved
css/fieldmanager-richtext-content.css Show resolved Hide resolved
webpack.config.js Show resolved Hide resolved
webpack.config.js Show resolved Hide resolved
// postcss-preset-env includes autoprefixer
'postcss-preset-env',
{
browsers: 'last 2 versions',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding this to package.json via the browserslist field (or a .browserslistrc file) instead so other tools like Babel can make use of it too. 🙂

https://github.com/csstools/postcss-preset-env#browsers
https://babeljs.io/docs/en/babel-preset-env

build/js/fieldmanager.bundle.min.js Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants