updated babel/webpack docs to work with latest versions

This commit is contained in:
Per Eriksson 2020-12-29 23:54:23 +01:00 committed by Stephan Hoyer
parent 891265de8b
commit d93cca964e

View file

@ -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"
} }
} }
``` ```