chore: add core-js@3 example in readme (#5633)

This commit is contained in:
Xin Du (Clark) 2019-05-02 09:22:44 +01:00 committed by GitHub
parent 989add8fb2
commit 9d50bbb465
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,21 +1,11 @@
# `@nuxt/babel-preset-app` # `@nuxt/babel-preset-app`
> Default babel preset for nuxt > Default babel preset for nuxt
## Usage ## Usage
This is the default preset used by Nuxt, which is mainly a wrapper around the `@babel/preset-env` preset. It also optionally uses the `@vue/babel-preset-jsx` preset as well as `@babel/plugin-syntax-dynamic-import`, `@babel/plugin-proposal-decorators`, `@babel/plugin-proposal-class-properties`, `@babel/plugin-transform-runtime`. Furthermore the preset is adding polyfills. This is the default preset used by Nuxt, which is mainly a wrapper around the `@babel/preset-env` preset. It also optionally uses the `@vue/babel-preset-jsx` preset as well as `@babel/plugin-syntax-dynamic-import`, `@babel/plugin-proposal-decorators`, `@babel/plugin-proposal-class-properties`, `@babel/plugin-transform-runtime`. Furthermore the preset is adding polyfills.
Usually, no additional configuration is required. If needed though, there is an option to fine-tune the preset's behavior. Just add the following to `nuxt.config.js`:
```js
babel: {
presets({ isServer }) {
return [
[ "@nuxt/babel-preset-app", options ]
]
}
}
```
**Note**: Since `core-js@2` and `core-js@3` are both supported from Babel 7.4.0, we recommend directly adding `core-js` and setting the version via the [`corejs`](#corejs) option. **Note**: Since `core-js@2` and `core-js@3` are both supported from Babel 7.4.0, we recommend directly adding `core-js` and setting the version via the [`corejs`](#corejs) option.
```sh ```sh
@ -27,15 +17,30 @@ yarn add --dev core-js@2 @babel/runtime-corejs2
``` ```
...where `options` is an object with parameters, for example: Usually, no additional configuration is required. If needed though, there is an option to fine-tune the preset's behavior. Just add the following to `nuxt.config.js`:
```js
babel: {
presets({ isServer }) {
return [
[ "@nuxt/babel-preset-app", options ]
]
}
}
``` ```
const options = {
`options` is an object with parameters, for example:
```js
const options = {
useBuiltIns: "entry" useBuiltIns: "entry"
} }
``` ```
Below is a list of all available parameters: Below is a list of all available parameters:
### Options ### Options
* **buildTarget** - passed in through the Builder, either `"server"` or `"client"` * **buildTarget** - passed in through the Builder, either `"server"` or `"client"`
* **configPath** - [`@babel/preset-env` parameter](https://babeljs.io/docs/en/babel-preset-env#configpath) * **configPath** - [`@babel/preset-env` parameter](https://babeljs.io/docs/en/babel-preset-env#configpath)
* **forceAllTransforms** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#forcealltransforms)' parameter * **forceAllTransforms** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#forcealltransforms)' parameter
@ -54,23 +59,57 @@ Below is a list of all available parameters:
* **spec** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#spec)' parameter * **spec** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#spec)' parameter
* **targets** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#targets)' parameter * **targets** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#targets)' parameter
* **useBuiltIns**, default `"usage"` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#usebuiltins)' parameter * **useBuiltIns**, default `"usage"` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#usebuiltins)' parameter
* **corejs**, default `{ version: 2 }` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#corejs)' parameter
There are [detailed docs](https://babeljs.io/docs/en/babel-preset-env#options) for the parameters of '@babel/preset-env'. There are [detailed docs](https://babeljs.io/docs/en/babel-preset-env#options) for the parameters of '@babel/preset-env'.
### Example 1. Change targets for server and client respectively ### Example 1. Change targets for server and client respectively
```js ```js
babel: { export default {
presets({ isServer }) { build: {
return [ babel: {
[ presets({ isServer }) {
"@nuxt/babel-preset-app", return [
{ [
targets: isServer "@nuxt/babel-preset-app",
? { node: "current" } {
: { browsers: ["last 2 versions"], ie: 11 } targets: isServer
} ? { node: "current" }
] : { browsers: ["last 2 versions"], ie: 11 }
] }
]
]
}
}
} }
}, }
```
### Example 2. Use core-js@3
**NOTE**: Make sure that all dependencies have been upgraded to use core-js@3. If core-js@2 and core-js@3 are both dependent, babel may resolve incorrect core-js package which is hoisted by yarn/npm.
```sh
yarn add --dev core-js@2 @babel/runtime-corejs2
```
```js
export default {
build: {
babel: {
presets({ isServer }) {
return [
[
require.resolve('@nuxt/babel-preset-app'),
{
buildTarget: isServer ? 'server' : 'client'
corejs: { version: 3 }
}
]
]
}
}
}
}
``` ```