Re-use webpack and babel config for build script #12685

griffbrad · 2018-12-07T17:30:53Z

Description

This is an in-progress PR that adds a build-config package, which pulls the base webpack config into a package so it can be easily re-used by 3rd-party developers. It then adds a build.js script to @wordpress/scripts that leverages the config. Once merged, this would allow developers to either depend on the scripts package or run npx wp-scripts build to build blocks and extensions.

By having something like this in core, we'd have some simple build tools available out of the box so that block developers don't need to hunt down 3rd-party tools or configure webpack/babel manually. Further, the build-config package may also be useful for 3rd-party tool developers (e.g. create-guten-block, gutenblock, etc) who want to better ensure their compatibility with Gutenberg.

How has this been tested?

The first thing to test with this PR is just a normal Gutenberg build because much of the webpack config has been extracted into a package. From what I can tell, everything still builds correctly, tests pass, and Gutenberg appears to function as expected.

Testing block building using wp-scripts is a bit tricky because you're running scripts from unpublished packages only available locally. To make this work, I do the following:

Build Gutenberg itself on this feature branch with npm run build.
Clone the following example plugin into your plugins folder: https://github.com/griffbrad/wp-scripts-build-block-example-plugin
In that plugin's folder, run npm run copy-local-gutenberg-packages && npm i.
Run npm run build in the example plugin's folder. The block's code in src/index.js will be built with the output being placed in build.
Activate the example plugin and ensure the "WP Scripts Build Tool" block is available and functioning.

These testing instructions copy the built Gutenberg plugin and its packages into the example plugin itself because I've found that using a file ref to traverse back to the parent directory causes NPM to randomly crash and spew non-sense.

Types of changes

New feature

Checklist:

My code is tested. (Working on a script that does some basic end-to-end testing of the process.)
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
Cleaner build script output. Currently just logging messages from webpack's compiler directly.
Simpler default for webpack output configuration.
Docs with examples for modifying the base webpack config when needed. Mostly thinking of this as a "zero configuration" approach, but I can foresee some common tweaks we may want to support.

Planned follow-up PRs

Assuming we get this first PR ready and merged, I'll likely add a separate dev script with a watch flag and an init script that sets up a basic template/boilerplate for at least block development.

Pull the Gutenberg webpack config into a package so it can be re-used for block/extension development.

Use code from WP Calypso for handling WP externals so we don't have to have the actual list of packages accessible in our webpack configuration.

…uild-config.

gziolo · 2018-12-14T13:25:41Z

Thanks for starting this PR. I missed it and started exploration for something similar but limited in scope in #12837. I will take a closer look at what you proposed next week 👍

gziolo

Nice idea to expose Webpack config. I think we should limit this PR to the config and tackle the script part separately.

package.json

packages/build-config/config/webpack.config.js

gziolo · 2018-12-22T13:24:48Z

packages/build-config/config/webpack.config.js

+			{
+				test: /\.js$/,
+				exclude: [
+					/block-serialization-spec-parser/,


We should do something to make it more bullet-proof. I have no idea how it will behave outside of Gutenberg repository. It was a quick workaround to make ES5 modules with Webpack.

packages/build-config/config/webpack.config.js

packages/build-config/package.json

gziolo · 2018-12-22T13:29:47Z

packages/scripts/scripts/build.js

+const webpack = require( 'webpack' );
+const formatWebpackMessages = require( 'react-dev-utils/formatWebpackMessages' );
+
+webpackConfig.module.rules.forEach(


See my PR: #12837.

I think we should tackle @wordpress/scripts separately. It would be awesome to expose Webpack config first.

gziolo · 2018-12-22T13:33:25Z

packages/build-config/config/webpack.config.js

+	return `wp.${ name.replace( /-([a-z])/g, ( match, letter ) => letter.toUpperCase() ) }`;
+};
+
+const wordpressExternals = ( context, request, callback ) =>


Does it magically detect all imports starting with @wordpress/* and converts them into externals?

Would it make sense to apply all improvements to the config as its own PR first so we could test them in isolation?

dmsnell · 2019-01-03T22:28:28Z

so it can be easily re-used by 3rd-party developers

Do we have developers asking for this? I'm a little concerned that this is introducing more complexity into the build process and may not be used. It's taking our config one step further away from where people expect it.

Sorry - this isn't meant to sound critical - I'm just trying to understand the justification for this change.

griffbrad · 2019-01-03T22:42:31Z

@dmsnell Basically, there is no official tooling or guidance regarding the JS build process for block and/or extension development currently. The Gutenberg Handbook offers ESNext examples but doesn’t offer a straightforward option for actually running that code. Extracing the webpack config allows us to leverage what is already in Gutenberg to offer something for those folks in the scripts package.
It could also improve compatability (for example, in the handling of RTL CSS) with blocks built by other tools (e.g. create-guten-block), if they could use the same webpack/babel config internally.

gziolo · 2019-01-23T08:31:03Z

I have just landed #12837 which introduces wp-scripts start and wp-scripts run scripts to @wordpress/scripts package. Do you plan to update this PR to include the latest changes?

By the way, the topic of shared Webpack config was discussed yesterday during weekly Core JS chat (link requires registration):
https://wordpress.slack.com/archives/C5UNMSU4R/p1548165732173600.

gziolo · 2019-02-12T07:34:05Z

I'm closing this in favor of #13814. I had to merge this code into Gutenberg repository so I could continue all the great work started here. Let's continue on the new PR 🙇

griffbrad added 16 commits December 6, 2018 19:30

New build-config package with webpack config.

a8d5dd2

Pull the Gutenberg webpack config into a package so it can be re-used for block/extension development.

Require new build-config package.

bb03b62

Dynamically handle WP externals with a function.

21670e3

Use code from WP Calypso for handling WP externals so we don't have to have the actual list of packages accessible in our webpack configuration.

Use webpack config from build-config package.

3ea418d

Require build-config package.

2a09c6f

Begin pruning dev dependencies now assigned to build-config.

4d7571a

Update package-lock.json

ecd195e

Update package-lock.json.

7a0d735

Adjust file refs for WP packages.

ebf79a3

Move main gutenberg entry definition and webpack copy plugin out of b…

f4f0d1b

…uild-config.

Add react-dev-utils for formatting webpack compiler messages.

117c9dc

Basic build script stub.

4e40574

Update package-lock.json

452c105

Implement build script using webpack config from build-config.

d3d6896

Configure babel-loader in build script.

2da68fd

Adjust output path so build goes to working directory.

d0fd1fa

chrisvanpatten added the [Type] Build Tooling Issues or PRs related to build tooling label Dec 7, 2018

gziolo added the [Tool] WP Scripts /packages/scripts label Dec 14, 2018

gziolo self-requested a review December 14, 2018 13:24

gziolo requested a review from ntwb December 14, 2018 13:27

gziolo requested changes Dec 22, 2018

View reviewed changes

gziolo reviewed Dec 22, 2018

View reviewed changes

This was referenced Jan 15, 2019

Scripts: Add support for start and build scripts to the package #12837

Merged

Add new section on scoping JS code #13041

Merged

gziolo mentioned this pull request Feb 1, 2019

Add JavaScript Documentation around setting up Webpack, Babel, and Building #13629

Merged

gziolo added the [Status] In Progress Tracking issues with work in progress label Feb 6, 2019

gziolo mentioned this pull request Feb 11, 2019

Extract reusable part of Webpack config and put in @wordpress/scripts #13814

Merged

6 tasks

gziolo closed this Feb 12, 2019

gziolo deleted the try/reuse-webpack-config-for-build-script branch February 12, 2019 07:34

gziolo removed [Status] In Progress Tracking issues with work in progress labels Jun 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Re-use webpack and babel config for build script #12685

Re-use webpack and babel config for build script #12685

griffbrad commented Dec 7, 2018 •

edited

Loading

gziolo commented Dec 14, 2018

gziolo left a comment

gziolo Dec 22, 2018

gziolo Dec 22, 2018

gziolo Dec 22, 2018

dmsnell commented Jan 3, 2019

griffbrad commented Jan 3, 2019

gziolo commented Jan 23, 2019 •

edited

Loading

gziolo commented Feb 12, 2019

Re-use webpack and babel config for build script #12685

Re-use webpack and babel config for build script #12685

Conversation

griffbrad commented Dec 7, 2018 • edited Loading

Description

How has this been tested?

Types of changes

Checklist:

Planned follow-up PRs

gziolo commented Dec 14, 2018

gziolo left a comment

Choose a reason for hiding this comment

gziolo Dec 22, 2018

Choose a reason for hiding this comment

gziolo Dec 22, 2018

Choose a reason for hiding this comment

gziolo Dec 22, 2018

Choose a reason for hiding this comment

dmsnell commented Jan 3, 2019

griffbrad commented Jan 3, 2019

gziolo commented Jan 23, 2019 • edited Loading

gziolo commented Feb 12, 2019

griffbrad commented Dec 7, 2018 •

edited

Loading

gziolo commented Jan 23, 2019 •

edited

Loading