updated babel/webpack docs to work with latest versions
This commit is contained in:
parent
891265de8b
commit
d93cca964e
1 changed files with 27 additions and 7 deletions
32
docs/jsx.md
32
docs/jsx.md
|
|
@ -70,7 +70,7 @@ If you want to use Webpack and Babel together, [skip to the section below](#usin
|
||||||
To install Babel as a standalone tool, use this command:
|
To install Babel as a standalone tool, use this command:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install @babel/cli @babel/preset-env @babel/plugin-transform-react-jsx --save-dev
|
npm install @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-react-jsx --save-dev
|
||||||
```
|
```
|
||||||
|
|
||||||
Create a `.babelrc` file:
|
Create a `.babelrc` file:
|
||||||
|
|
@ -87,15 +87,32 @@ Create a `.babelrc` file:
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
To run Babel as a standalone tool, run this from the command line:
|
To run Babel, setup an npm script. Open `package.json` and add this entry under `"scripts"`:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"name": "my-project",
|
||||||
|
"scripts": {
|
||||||
|
"babel": "babel src --out-dir bin --source-maps"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
You can now run Babel using this command:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
babel src --out-dir bin --source-maps
|
npm run babel
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Using Babel with Webpack
|
#### Using Babel with Webpack
|
||||||
|
|
||||||
If you're already using Webpack as a bundler, you can integrate Babel to Webpack by following these steps.
|
If you haven't already installed Webpack as a bundler, use this command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install webpack webpack-cli --save-dev
|
||||||
|
```
|
||||||
|
|
||||||
|
You can integrate Babel to Webpack by following these steps.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install @babel/core babel-loader @babel/preset-env @babel/plugin-transform-react-jsx --save-dev
|
npm install @babel/core babel-loader @babel/preset-env @babel/plugin-transform-react-jsx --save-dev
|
||||||
|
|
@ -128,12 +145,15 @@ module.exports = {
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
rules: [{
|
rules: [{
|
||||||
test: /\.js$/,
|
test: /\.(js|jsx)$/,
|
||||||
exclude: /\/node_modules\//,
|
exclude: /\/node_modules\//,
|
||||||
use: {
|
use: {
|
||||||
loader: 'babel-loader'
|
loader: 'babel-loader'
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.js', '.jsx']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
@ -148,7 +168,7 @@ To run the bundler, setup an npm script. Open `package.json` and add this entry
|
||||||
{
|
{
|
||||||
"name": "my-project",
|
"name": "my-project",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "webpack -d --watch"
|
"start": "webpack --mode development --watch"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue