mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-17 06:01:34 +00:00
refactor(babel-preset-app): simplify babel preset config (#6087)
This commit is contained in:
parent
f6ca2c77ed
commit
2fc73cf119
@ -21,7 +21,7 @@ Usually, no additional configuration is required. If needed though, there is an
|
||||
|
||||
```js
|
||||
babel: {
|
||||
presets({ isServer }) {
|
||||
presets(env, [ preset, options ]) {
|
||||
return [
|
||||
[ "@nuxt/babel-preset-app", options ]
|
||||
]
|
||||
@ -29,6 +29,10 @@ babel: {
|
||||
}
|
||||
```
|
||||
|
||||
`env` is an object which contains `envName` (`server`, `client`, `modern`) and all `nuxtEnv` properties (`isDev`, `isServer`, `isClient`, `isModern`, `isLegacy`)
|
||||
|
||||
`preset` is the preset package name `@nuxt/babel-preset-app`
|
||||
|
||||
`options` is an object with parameters, for example:
|
||||
|
||||
```js
|
||||
@ -37,11 +41,10 @@ const options = {
|
||||
}
|
||||
```
|
||||
|
||||
Below is a list of all available parameters:
|
||||
Below is a list of all available `options` parameters:
|
||||
|
||||
### Options
|
||||
|
||||
* **buildTarget** - passed in through the Builder, either `"server"` or `"client"`
|
||||
* **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
|
||||
* **debug**, default `false` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#debug)' parameter
|
||||
@ -50,9 +53,8 @@ Below is a list of all available parameters:
|
||||
* **exclude** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#exclude)' parameter
|
||||
* **ignoreBrowserslistConfig**, defaults to value of `modern` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#ignorebrowserslistconfig)' parameter
|
||||
* **include** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#include)' parameter
|
||||
* **jsx**, default truish, can be a an object passed as params to [@vue/babel-preset-jsx`](https://www.npmjs.com/package/@vue/babel-preset-jsx)
|
||||
* **jsx**, default true, can be a an object passed as params to [@vue/babel-preset-jsx`](https://www.npmjs.com/package/@vue/babel-preset-jsx)
|
||||
* **loose**, default `false` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#loose)' parameter and also sets `loose=true` for `@babel/plugin-proposal-class-properties`
|
||||
* **modern** passed by builder, either `true` or `false`
|
||||
* **modules**, default `false` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#modules)' parameter
|
||||
* **polyfills**, default `core-js@2: ['es6.array.iterator','es6.promise','es6.object.assign','es7.promise.finally']`, `core-js@3: ['es.array.iterator','es.promise','es.object.assign','es.promise.finally']`, more [in the corresponding repository](https://github.com/zloirock/core-js)
|
||||
* **shippedProposals** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#shippedproposals)' parameter
|
||||
@ -69,14 +71,16 @@ There are [detailed docs](https://babeljs.io/docs/en/babel-preset-env#options) f
|
||||
export default {
|
||||
build: {
|
||||
babel: {
|
||||
presets({ isServer }) {
|
||||
presets({ envName }) {
|
||||
const envTargets = {
|
||||
client: { browsers: ["last 2 versions"], ie: 11 },
|
||||
server: { node: "current" },
|
||||
}
|
||||
return [
|
||||
[
|
||||
"@nuxt/babel-preset-app",
|
||||
{
|
||||
targets: isServer
|
||||
? { node: "current" }
|
||||
: { browsers: ["last 2 versions"], ie: 11 }
|
||||
targets: envTargets[envName]
|
||||
}
|
||||
]
|
||||
]
|
||||
@ -98,12 +102,12 @@ yarn add --dev core-js@2 @babel/runtime-corejs2
|
||||
export default {
|
||||
build: {
|
||||
babel: {
|
||||
presets({ isServer }) {
|
||||
// envName: server, client, modern
|
||||
presets({ envName }) {
|
||||
return [
|
||||
[
|
||||
require.resolve('@nuxt/babel-preset-app'),
|
||||
'@nuxt/babel-preset-app',
|
||||
{
|
||||
buildTarget: isServer ? 'server' : 'client',
|
||||
corejs: { version: 3 }
|
||||
}
|
||||
]
|
||||
|
@ -43,23 +43,20 @@ function getPolyfills (targets, includes, { ignoreBrowserslistConfig, configPath
|
||||
return includes.filter(item => isPluginRequired(builtInTargets, builtInsList[item]))
|
||||
}
|
||||
|
||||
module.exports = (context, options = {}) => {
|
||||
module.exports = (api, options = {}) => {
|
||||
const presets = []
|
||||
const plugins = []
|
||||
|
||||
const modern = options.modern === undefined
|
||||
? context.env('modern')
|
||||
: Boolean(options.modern)
|
||||
const envName = api.env()
|
||||
|
||||
const {
|
||||
polyfills: userPolyfills,
|
||||
buildTarget,
|
||||
loose = false,
|
||||
debug = false,
|
||||
useBuiltIns = 'usage',
|
||||
modules = false,
|
||||
spec,
|
||||
ignoreBrowserslistConfig = modern,
|
||||
ignoreBrowserslistConfig = envName === 'modern',
|
||||
configPath,
|
||||
include,
|
||||
exclude,
|
||||
@ -76,23 +73,34 @@ module.exports = (context, options = {}) => {
|
||||
corejs = { version: Number(corejs) }
|
||||
}
|
||||
|
||||
let { targets } = options
|
||||
if (modern === true) {
|
||||
targets = { esmodules: true }
|
||||
} else if (targets === undefined && typeof buildTarget === 'string') {
|
||||
targets = buildTarget === 'server' ? { node: 'current' } : { ie: 9 }
|
||||
const defaultTargets = {
|
||||
server: { node: 'current' },
|
||||
client: { ie: 9 },
|
||||
modern: { esmodules: true }
|
||||
}
|
||||
|
||||
let polyfills
|
||||
if (modern === false && useBuiltIns === 'usage' && buildTarget === 'client') {
|
||||
polyfills = getPolyfills(targets, userPolyfills || getDefaultPolyfills(corejs), {
|
||||
ignoreBrowserslistConfig,
|
||||
configPath,
|
||||
corejs
|
||||
})
|
||||
let { targets = defaultTargets[envName] } = options
|
||||
|
||||
// modern mode can only be { esmodules: true }
|
||||
if (envName === 'modern') {
|
||||
targets = defaultTargets.modern
|
||||
}
|
||||
|
||||
const polyfills = []
|
||||
|
||||
if (envName === 'client' && useBuiltIns === 'usage') {
|
||||
polyfills.push(
|
||||
...getPolyfills(
|
||||
targets,
|
||||
userPolyfills || getDefaultPolyfills(corejs),
|
||||
{
|
||||
ignoreBrowserslistConfig,
|
||||
configPath,
|
||||
corejs
|
||||
}
|
||||
)
|
||||
)
|
||||
plugins.push([require('./polyfills-plugin'), { polyfills }])
|
||||
} else {
|
||||
polyfills = []
|
||||
}
|
||||
|
||||
// Pass options along to babel-preset-env
|
||||
@ -132,7 +140,7 @@ module.exports = (context, options = {}) => {
|
||||
regenerator: useBuiltIns !== 'usage',
|
||||
corejs: false,
|
||||
helpers: useBuiltIns === 'usage',
|
||||
useESModules: buildTarget !== 'server',
|
||||
useESModules: envName !== 'server',
|
||||
absoluteRuntime
|
||||
}])
|
||||
|
||||
|
@ -80,24 +80,26 @@ export default class WebpackBaseConfig {
|
||||
}
|
||||
|
||||
getBabelOptions () {
|
||||
const envName = this.name
|
||||
const options = {
|
||||
...this.buildContext.buildOptions.babel,
|
||||
envName: this.name
|
||||
envName
|
||||
}
|
||||
|
||||
if (options.configFile !== false) {
|
||||
return options
|
||||
}
|
||||
|
||||
const defaultPreset = [
|
||||
require.resolve('@nuxt/babel-preset-app'),
|
||||
{
|
||||
buildTarget: this.isServer ? 'server' : 'client'
|
||||
}
|
||||
]
|
||||
const defaultPreset = [ require.resolve('@nuxt/babel-preset-app'), {} ]
|
||||
|
||||
if (typeof options.presets === 'function') {
|
||||
options.presets = options.presets({ isServer: this.isServer }, defaultPreset)
|
||||
options.presets = options.presets(
|
||||
{
|
||||
envName,
|
||||
...this.nuxtEnv
|
||||
},
|
||||
defaultPreset
|
||||
)
|
||||
}
|
||||
|
||||
if (!options.babelrc && !options.presets) {
|
||||
|
Loading…
Reference in New Issue
Block a user