-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Add JavaScript Documentation around setting up Webpack, Babel, and Building #13629
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Show resolved
Hide resolved
```json | ||
"scripts": { | ||
"dev": "webpack --watch", | ||
"build": "cross-env NODE_ENV=production webpack" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a great start. I've added a mix of grammar fixes and formatting tweaks. Excited to see this move forward!
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
Thanks @mkaz for tackling those fixes. Dismissing my review so I don't block merge if someone else approves 👍
@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:
|
@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 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. |
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. |
docs/designers-developers/developers/tutorials/javascript/versions-and-building.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/versions-and-building.md
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/versions-and-building.md
Outdated
Show resolved
Hide resolved
Aside: in case you didn't know, you can batch suggestion commits when you go to Files changed tab :)
Yes, this is unfortunate, but it is what it is. You can make the aforementioned |
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/versions-and-building.md
Show resolved
Hide resolved
…uild-setup.md Co-Authored-By: mkaz <marcus@mkaz.com>
…ions-and-building.md Co-Authored-By: mkaz <marcus@mkaz.com>
…uild-setup.md Co-Authored-By: mkaz <marcus@mkaz.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just have some grammar changes; otherwise this seems ready to me unless anyone else notices anything :)
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
Outdated
Show resolved
Hide resolved
Co-Authored-By: mkaz <marcus@mkaz.com>
Co-Authored-By: mkaz <marcus@mkaz.com>
Would be good to follow-up on this and focus on the scripts abstraction instead of the low-level tools. |
There is #13712 opened to address it. I have it on my todo list 👍 |
…ilding (#13629) * Add JS Build Setup * Update docs/designers-developers/developers/tutorials/javascript/js-build-setup.md Co-Authored-By: mkaz <marcus@mkaz.com> * Whitespace and code brackets * Update with better npm install instructions using --save-dev * Update docs/designers-developers/developers/tutorials/javascript/versions-and-building.md Co-Authored-By: mkaz <marcus@mkaz.com> * Update docs/designers-developers/developers/tutorials/javascript/js-build-setup.md Co-Authored-By: mkaz <marcus@mkaz.com> * Updates node, cli, and pragma per review * Update why to use ESNext * Apply suggestions from code review Co-Authored-By: mkaz <marcus@mkaz.com> * Apply suggestions from code review Co-Authored-By: mkaz <marcus@mkaz.com>
…ilding (#13629) * Add JS Build Setup * Update docs/designers-developers/developers/tutorials/javascript/js-build-setup.md Co-Authored-By: mkaz <marcus@mkaz.com> * Whitespace and code brackets * Update with better npm install instructions using --save-dev * Update docs/designers-developers/developers/tutorials/javascript/versions-and-building.md Co-Authored-By: mkaz <marcus@mkaz.com> * Update docs/designers-developers/developers/tutorials/javascript/js-build-setup.md Co-Authored-By: mkaz <marcus@mkaz.com> * Updates node, cli, and pragma per review * Update why to use ESNext * Apply suggestions from code review Co-Authored-By: mkaz <marcus@mkaz.com> * Apply suggestions from code review Co-Authored-By: mkaz <marcus@mkaz.com>
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.