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.

Sign up for GitHub

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

Jump to bottom

Docs: Update JavaScript build and setup with wp-scripts updates #14440

Merged
merged 8 commits into from Mar 18, 2019
Merged

Docs: Update JavaScript build and setup with wp-scripts updates #14440

merged 8 commits into from Mar 18, 2019

Conversation

mkaz
Copy link
Member

@mkaz mkaz commented Mar 14, 2019 •
edited by gziolo

Description

Closes #13712.

Updates the build and setup section of the JavaScript tutorial with the new simplified commands included in wp-scripts. Removes webpack and babel configs and replaces recommending to use the default configs using wp-scripts build|start

How has this been tested?

Follow the instructions, in the tutorial which includes a simple block you can create to test.
Until the wp-scripts gets published you will need to add a local reference to @wordpress/scripts package.

For me Gutenberg is one directory up from my sample plugin so my package.json entry looks like:

    "@wordpress/scripts": "file:../gutenberg/packages/scripts",

View documentation live on branch here

Depends on #14168

@mkaz mkaz added the [Type] Developer Documentation Documentation for developers label Mar 14, 2019
@youknowriad
Copy link
Contributor

Nice ❤️

chrisvanpatten
chrisvanpatten previously requested changes Mar 14, 2019
View reviewed changes
Copy link
Member

@chrisvanpatten chrisvanpatten left a comment

Choose a reason for hiding this comment

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

Looks great! A few small suggestions…

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
@mkaz
Copy link
Member Author

mkaz commented Mar 14, 2019

@nosolosw @gziolo In my testing, it was still required to install the following packages, they were not picked up as dependencies of @wordpress/scripts

webpack webpack-cli @wordpress/babel-preset-default babel-plugin-transform-react-jsx

The babel-plugin-transform-react-jsx looks to be the only one not specified in the scripts package.json. I'm not sure why the others didn't work for me, my hunch is because of the local package references.

Following the instructions in the docs and installing and it all works great, so much simpler!

@oandregal
Copy link
Member

@mkaz for ESNext we need to land #14168 first. I'm waiting for Travis so I can merge :)

This example oandregal/understanding-gutenberg#7 shows how it works (I'm using JSX syntax and arrow functions in the src/index.js and the build/index.js is transpiled properly).

@chrisvanpatten chrisvanpatten dismissed their stale review March 14, 2019 17:51

changes addressed; awesome stuff @mkaz!

oandregal
oandregal approved these changes Mar 15, 2019
View reviewed changes
Copy link
Member

@oandregal oandregal left a comment

Choose a reason for hiding this comment

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

This is great to see! I pushed some commits, feel free to remove them if you don't like them. I thought it'd be faster to commit than to write the suggestion :)

I'm approving so it's ready to go, although I understand that we want to merge this after the packages' release.

gziolo
gziolo approved these changes Mar 15, 2019
View reviewed changes
Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

Awesome work. Thanks for putting this together and updating with the latest changes introduced. It should be very helpful moving forward. We probably should also reference this document from @wordpress/scripts readme file as well.

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
Additionally, webpack has a `--watch` flag that will keep the process running, watching for any changes to the `block.js` file and re-building as changes occur. This is useful during development, when you might have a lot of changes in progress.

You can start the watcher by running `npm run dev` in a terminal. You can then edit away in your text editor; after each save, webpack will automatically build. You can then use the familiar edit/save/reload development process.
Now, when you run `npm run start` a watcher will run in the terminal. You can then edit away in your text editor; after each save, it will automatically build. You can then use the familiar edit/save/reload development process.
Copy link
Member

Choose a reason for hiding this comment

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

Next step, hot module reloading support? :)

@gziolo gziolo added the [Release] Do Not Punt Used to indicate the issue or pull request must not be moved from the assigned milestone label Mar 15, 2019
@gziolo @mkaz
Update docs/designers-developers/developers/tutorials/javascript/js-b…
d051c6d 
…uild-setup.md

Co-Authored-By: mkaz <marcus@mkaz.com>
@youknowriad youknowriad merged commit 74c0ed7 into master Mar 18, 2019
@youknowriad youknowriad deleted the update/js-build-docs branch March 18, 2019 07:18
@youknowriad youknowriad added this to the 5.3 (Gutenberg) milestone Mar 18, 2019
This was referenced Mar 18, 2019
Merged
Merged
Closed
@jorgefilipecosta jorgefilipecosta mentioned this pull request Mar 20, 2019
Closed
youknowriad pushed a commit that referenced this pull request Mar 20, 2019
@mkaz @youknowriad
Docs: Update JavaScript build and setup with wp-scripts updates (#14440)
f337b92
youknowriad pushed a commit that referenced this pull request Mar 20, 2019
@mkaz @youknowriad
Docs: Update JavaScript build and setup with wp-scripts updates (#14440)
4a7497f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oandregal oandregal oandregal approved these changes

@gziolo gziolo gziolo approved these changes

@chrisvanpatten chrisvanpatten chrisvanpatten left review comments

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@notnownikki notnownikki Awaiting requested review from notnownikki

@youknowriad youknowriad Awaiting requested review from youknowriad

Assignees

@mkaz mkaz

Labels
[Release] Do Not Punt Used to indicate the issue or pull request must not be moved from the assigned milestone [Type] Developer Documentation Documentation for developers
Projects
None yet
Milestone
5.3 (Gutenberg)
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@mkaz @youknowriad @oandregal @gziolo @chrisvanpatten