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

Scripts: Add official flags for build and start scripts #22310

Merged
merged 6 commits into from
May 18, 2020

Conversation

gziolo
Copy link
Member

@gziolo gziolo commented May 13, 2020

Description

Related to #21827.

Closes #14492.

The last part left is how one can take advantage of global variables to do some advanced work:

  • WP_BUNDLE_ANALYZER
  • WP_DEVTOOL
  • WP_LIVE_RELOAD_PORT
    Ideally, those constants should be abstracted with CLI arguments similar to @draganescu did in Update/e2e tests options #14129. In effect, we would be able to run the following, e.g.:
$ npx wp-scripts build --webpack-live-reload-port=12345 --webpack-bundle-analyzer --webpack-devtool=inline-source-map

This PR adds 3 new flags to use with build and start scripts from @wordpress/scripts:

  • New --webpack-no-externals flag added to build and start scripts. It disables scripts' assets generation, and omits the list of default externals.
  • New --webpack-bundle-analyzer flag added to build and start scripts. It enables visualization for the size of webpack output files with an interactive zoomable treemap.
  • New --webpack--devtool flag added to start script. It controls how source maps are generated. See options at https://webpack.js.org/configuration/devtool/#devtool.

WP_LIVE_RELOAD_PORT wasn't exposed as a flag because its future is uncertain. It might get replaces with React Fast Refresh as proposed in #21008.

How has this been tested?

One way to test it by running npm run analyze-bundles in Gutenberg that was updated to use --webpack-bundle-analyzer flag.

Types of changes

New features (non-breaking change which adds functionality).

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • [N/A] My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • [N/A] I've updated all React Native files affected by any refactorings/renamings in this PR.

@gziolo gziolo self-assigned this May 13, 2020
@github-actions
Copy link

github-actions bot commented May 13, 2020

Size Change: 0 B

Total Size: 834 kB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.93 kB 0 B
build/block-directory/style-rtl.css 790 B 0 B
build/block-directory/style.css 791 B 0 B
build/block-editor/index.js 105 kB 0 B
build/block-editor/style-rtl.css 10.8 kB 0 B
build/block-editor/style.css 10.8 kB 0 B
build/block-library/editor-rtl.css 7.19 kB 0 B
build/block-library/editor.css 7.19 kB 0 B
build/block-library/index.js 118 kB 0 B
build/block-library/style-rtl.css 7.48 kB 0 B
build/block-library/style.css 7.48 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 182 kB 0 B
build/components/style-rtl.css 17.1 kB 0 B
build/components/style.css 17 kB 0 B
build/compose/index.js 6.67 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.42 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.11 kB 0 B
build/edit-navigation/index.js 5.77 kB 0 B
build/edit-navigation/style-rtl.css 709 B 0 B
build/edit-navigation/style.css 708 B 0 B
build/edit-post/index.js 28.1 kB 0 B
build/edit-post/style-rtl.css 12.2 kB 0 B
build/edit-post/style.css 12.2 kB 0 B
build/edit-site/index.js 12 kB 0 B
build/edit-site/style-rtl.css 5.22 kB 0 B
build/edit-site/style.css 5.22 kB 0 B
build/edit-widgets/index.js 7.87 kB 0 B
build/edit-widgets/style-rtl.css 4.69 kB 0 B
build/edit-widgets/style.css 4.69 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/index.js 44.3 kB 0 B
build/editor/style-rtl.css 5.07 kB 0 B
build/editor/style.css 5.08 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.64 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.13 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@gziolo gziolo requested a review from sgomes May 13, 2020 07:45
@gziolo gziolo added [Package] Scripts /packages/scripts [Type] Feature New feature to highlight in changelogs. labels May 13, 2020
@gziolo gziolo marked this pull request as ready for review May 13, 2020 08:01

- New `--webpack-no-externals` flag added to `build` and `start` scripts. It disables scripts' assets generation, and omits the list of default externals ([#22310](https://github.com/WordPress/gutenberg/pull/22310)).
- New `--webpack-bundle-analyzer` flag added to `build` and `start` scripts. It enables visualization for the size of webpack output files with an interactive zoomable treemap ([#22310](https://github.com/WordPress/gutenberg/pull/22310)).
- New `--webpack--devtool` flag added to `start` script. It controls how source maps are generated. See options at https://webpack.js.org/configuration/devtool/#devtool ([#22310](https://github.com/WordPress/gutenberg/pull/22310)).
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need wepack in the name or is it just an implementation detail?

Copy link
Member Author

Choose a reason for hiding this comment

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

We need a way to filtering those flags. We did something similar for puppeteer. We could whitelist them to not pass to webpack (jest fails when you pass it unknown flag), too. I’m fine with renaming

Copy link
Contributor

@sgomes sgomes left a comment

Choose a reason for hiding this comment

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

The changes regarding the bundle analyzer seem good, but I left a question/comment below.

packages/scripts/config/webpack.config.js Outdated Show resolved Hide resolved
@gziolo
Copy link
Member Author

gziolo commented May 18, 2020

Let's move forward with it. It was a long-standing issue.

@gziolo gziolo merged commit af09721 into master May 18, 2020
@gziolo gziolo deleted the update/scripts-build-flags branch May 18, 2020 06:19
@github-actions github-actions bot added this to the Gutenberg 8.2 milestone May 18, 2020
@adamziel adamziel mentioned this pull request May 18, 2020
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Scripts /packages/scripts [Type] Feature New feature to highlight in changelogs.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Abstract away and document advanced constants used in webpack config
3 participants