@nuxt/babel-preset-app-edge

    2.16.0-27606262.123206cb • Public • Published

    @nuxt/babel-preset-app

    Default babel preset for nuxt

    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-proposal-decorators, @babel/plugin-proposal-class-properties, @babel/plugin-transform-runtime. Furthermore the preset is adding polyfills.

    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 option.

    yarn add --dev core-js@3 @babel/runtime-corejs3
    
    # or
    
    yarn add --dev core-js@2 @babel/runtime-corejs2
    

    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:

    babel: {
      presets(env, [ preset, options ]) {
        return [
          [ "@nuxt/babel-preset-app", options ]
        ]
      }
    }

    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:

    const options = {
      useBuiltIns: "entry"
    }

    Below is a list of all available options parameters:

    Options

    There are detailed docs for the parameters of '@babel/preset-env'.

    Example 1. Change targets for server and client respectively

    export default {
      build: {
        babel: {
          presets({ envName }) {
            const envTargets = {
              client: { browsers: ["last 2 versions"], ie: 11 },
              server: { node: "current" },
            }
            return [
              [
                "@nuxt/babel-preset-app",
                {
                  targets: envTargets[envName]
                }
              ]
            ]
          }
        }
      }
    }

    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.

    yarn add --dev core-js@3 @babel/runtime-corejs3
    export default {
      build: {
        babel: {
          // envName: server, client, modern
          presets({ envName }) {
            return [
              [
                '@nuxt/babel-preset-app',
                {
                  corejs: { version: 3 }
                }
              ]
            ]
          }
        }
      }
    }

    Keywords

    none

    Install

    npm i @nuxt/babel-preset-app-edge

    DownloadsWeekly Downloads

    12,887

    Version

    2.16.0-27606262.123206cb

    License

    MIT

    Unpacked Size

    11.5 kB

    Total Files

    4

    Last publish

    Collaborators

    • nuxt.bot