refactor(babel-preset-app): simplify babel preset config (#6087)

This commit is contained in:
Xin Du (Clark) 2019-09-03 20:36:54 +01:00 committed by Pooya Parsa
parent f6ca2c77ed
commit 2fc73cf119
3 changed files with 55 additions and 41 deletions

View File

@ -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 }
}
]

View File

@ -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
}])

View File

@ -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) {