mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-07 09:22:27 +00:00
chore: add core-js@3 example in readme (#5633)
This commit is contained in:
parent
989add8fb2
commit
9d50bbb465
@ -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 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
Loading…
Reference in New Issue
Block a user