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

[mkaz]

Description

Adds a new page to the JavaScript tutorial explaining how to setup webpack, babel, and building ESNext and JSX.

This updates webpack and babel versions which differ from gutenberg-examples repo, so if we are good with the updates I can create some PRs to apply the same changes there.

How has this been tested?

Confirm the code works as explained.
View page on branch

Types of changes

Documentation.

I updated the table of contents, moving the JavaScript tutorial ahead of the Block Tutorial, since that is a more accurate order of knowledge needed. This also better for the way navigation works in the Handbook.

[gziolo]

@mkaz thank you for starting this PR. I will have a closer look next week. I left some comments with some details about the recent discussions around all the tooling related to this tutorial.

[gziolo]

See how it is handled in Gutenberg with build script from wp-scripts exposed by @wordpress/scripts package:

https://github.com/WordPress/gutenberg/blob/master/package.json#L152

[chrisvanpatten]

This is a great start. I've added a mix of grammar fixes and formatting tweaks. Excited to see this move forward!

Thanks @mkaz for tackling those fixes. Dismissing my review so I don't block merge if someone else approves 👍

[mkaz]

@gziolo @youknowriad I can use the wp-scripts package and it does help simplify some pieces, but it also includes a lot of extra dependencies, such as Chromium, jest, and other parts that aren't necessary when just starting to learn about webpack/babel

Here's the install summary for scripts:

+ @wordpress/[email protected]
added 1184 packages from 538 contributors and audited 23175 packages in 37.032s
found 0 vulnerabilities

[youknowriad]

@mkaz Good point about the dependencies, this is probably something that needs improvement separately as not everyone uses e2e tests and don't need Chrome... A solution could be to install puppeteer the first time you launch wp-scripts test-e2e. The other dependencies are less concerning for me.

In the end, the user only has to add one item (at least very few items) into its package.json and the setup is simple.

Overall, what's important I think is that we should be consistent. We're building the scripts package for the same reason this README is being written. Help people use a consistent and modern setup.

[chrisvanpatten]

I tend to agree w/ @youknowriad on that matter. It's not ideal that the script package installs so much out of the gate, but it still feels like overall a better user experience.

[gziolo]

Thanks @mkaz for tackling those fixes. Dismissing my review so I don't block merge if someone else approves 👍

Aside: in case you didn't know, you can batch suggestion commits when you go to Files changed tab :)

I can use the wp-scripts package and it does help simplify some pieces, but it also includes a lot of extra dependencies, such as Chromium, jest, and other parts that aren't necessary when just starting to learn about webpack/babel

Yes, this is unfortunate, but it is what it is. You can make the aforementioned puppeteer a peerDependency but then someone will have to install it themselves to use the command. I personally opted for the simplest approach assuming that you npm i only once and forget when using your plugin or theme. We can revisit it later by playing with npx (last time I tried it installs chromium every time you run it...) or something similar.

[youknowriad]

Would be good to follow-up on this and focus on the scripts abstraction instead of the low-level tools.

[gziolo]

There is #13712 opened to address it. I have it on my todo list 👍