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

Documentation: update install commands and babel config #13853

Merged
merged 2 commits into from
Feb 15, 2019
Merged

Documentation: update install commands and babel config #13853

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
774098c
Update install commands and babel config
oandregal Feb 13, 2019
e21cc9f
Fix typo
oandregal Feb 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 9 additions & 11 deletions docs/designers-developers/developers/tutorials/javascript/js-build-setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,17 +74,17 @@ Is this OK? (yes) yes

### Using npm to install packages

The next step is to install the packages required. You can install packages using the npm command `npm install`. If you pass the `--save-dev` parameter, npm will write the package as a dev dependency in the package.json file.
The next step is to install the packages required. You can install packages using the npm command `npm install`. If you pass the `--save-dev` parameter, npm will write the package as a dev dependency in the package.json file. The `--save-exact` parameter instructs npm to save an exact version of a dependency, not a range of valid versions. See [npm install documentation](https://docs.npmjs.com/cli/install) for more details.

Run `npm install --save-dev webpack`
Run `npm install --save-dev --save-exact webpack webpack-cli`

After installing, a `node_modules` directory is created with the webpack module and its dependencies.

Also, if you look at package.json file it will include a new section:

```json
"dependencies": {
"webpack": "^4.29.0"
"webpack": "4.29.0"
}
```

Expand Down Expand Up @@ -127,16 +127,14 @@ module.exports = {

Next, you need to install babel, the webpack loader, and the JSX plugin using:

```
npm install --save babel-loader babel-core babel-plugin-transform-react-jsx
```
> npm install --save-dev --save-exact babel-loader @babel/core @babel/plugin-transform-react-jsx

You configure babel by creating a `.babelrc` file:

```
```json
{
"plugins": [
[ "transform-react-jsx", {
[ "@babel/plugin-transform-react-jsx", {
"pragma": "wp.element.createElement"
} ]
]
Expand Down Expand Up @@ -192,7 +190,7 @@ The mode is setup so it can be configured using environment variables, which can
},
```

This sets the environment variables, but different environments handle these settings in different ways. Using the `cross-env` helper module can help to handle this. Be sure to install the `cross-env` package using `npm install --save cross-env`.
This sets the environment variables, but different environments handle these settings in different ways. Using the `cross-env` helper module can help to handle this. Be sure to install the `cross-env` package using `npm install --save-dev --save-exact cross-env`.

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.

Expand All @@ -206,15 +204,15 @@ Babel has the ability to build JavaScript using rules that target certain browse

WordPress has a preset default you can use to target the minimum supported browsers by WordPress.

Install the module using: `npm install --save @wordpress/babel-preset-default`
Install the module using: `npm install --save-dev --save-exact @wordpress/babel-preset-default`

You then update `.babelrc` by adding a "presets" section:

```
{
"presets": [ "@wordpress/babel-preset-default" ],
"plugins": [
[ "transform-react-jsx", {
[ "@babel/plugin-transform-react-jsx", {
"pragma": "wp.element.createElement"
} ]
]
Expand Down