diff --git a/packages/babel-preset-app/README.md b/packages/babel-preset-app/README.md index f1d2408e5f..671e2a4047 100644 --- a/packages/babel-preset-app/README.md +++ b/packages/babel-preset-app/README.md @@ -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 } } ] diff --git a/packages/babel-preset-app/src/index.js b/packages/babel-preset-app/src/index.js index 9c28fe195b..28449149d4 100644 --- a/packages/babel-preset-app/src/index.js +++ b/packages/babel-preset-app/src/index.js @@ -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 }]) diff --git a/packages/webpack/src/config/base.js b/packages/webpack/src/config/base.js index 699915dd1c..b63f21e55c 100644 --- a/packages/webpack/src/config/base.js +++ b/packages/webpack/src/config/base.js @@ -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) {