CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue--babel-preset-app

Default Babel preset for Vue CLI projects providing comprehensive JavaScript/TypeScript transpilation and polyfill management

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

@vue/babel-preset-app

@vue/babel-preset-app is the default Babel preset used exclusively in Vue CLI projects. It provides comprehensive JavaScript/TypeScript transpilation and polyfill management with smart defaults for browser compatibility, automatic feature detection, and environment-specific optimizations.

Package Information

  • Package Name: @vue/babel-preset-app
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install @vue/babel-preset-app (typically installed as part of Vue CLI)

Core Imports

// CommonJS
const preset = require('@vue/babel-preset-app');

// ES modules (if supported)
import preset from '@vue/babel-preset-app';

Basic Usage

// babel.config.js
module.exports = {
  presets: [
    '@vue/babel-preset-app'
  ]
};

// With options
module.exports = {
  presets: [
    ['@vue/babel-preset-app', {
      targets: { node: 'current' },
      useBuiltIns: 'usage',
      polyfills: ['es.promise', 'es.object.assign']
    }]
  ]
};

Architecture

@vue/babel-preset-app is built around several key components:

  • @babel/preset-env Integration: Automatically determines transforms and polyfills based on browser targets
  • Vue JSX Support: Conditional JSX support for Vue 2 (@vue/babel-preset-jsx) and Vue 3 (@vue/babel-plugin-jsx)
  • Polyfill Management: Custom polyfill injection plugin for precise core-js polyfill control
  • Environment Detection: Automatic configuration for different build contexts (webpack, Jest, modern build)
  • Runtime Optimization: Transform-runtime integration for helper deduplication

Capabilities

Preset Function

The main preset export that returns Babel configuration based on context and options.

/**
 * Main preset function that returns Babel configuration
 * @param {Object} context - Babel context object (automatically provided by Babel)
 * @param {PresetOptions} options - Configuration options
 * @returns {BabelConfig} Babel configuration object with presets, plugins, and overrides
 */
function preset(context, options = {});

interface PresetOptions {
  // @babel/preset-env options
  targets?: string | string[] | { [key: string]: string };
  modules?: 'amd' | 'umd' | 'systemjs' | 'commonjs' | 'cjs' | 'auto' | false;
  useBuiltIns?: 'usage' | 'entry' | false;
  loose?: boolean;
  debug?: boolean;
  spec?: boolean;
  ignoreBrowserslistConfig?: boolean;
  configPath?: string;
  include?: string[];
  exclude?: string[];
  forceAllTransforms?: boolean;
  shippedProposals?: boolean;
  bugfixes?: boolean;
  
  // Vue CLI specific options
  polyfills?: string[];
  jsx?: boolean | object;
  entryFiles?: string[];
  absoluteRuntime?: string | boolean;
  version?: string;
  decoratorsBeforeExport?: boolean;
  decoratorsLegacy?: boolean;
}

interface BabelConfig {
  sourceType: 'unambiguous';
  overrides: Array<{
    exclude?: RegExp[];
    include?: RegExp[];
    presets: Array<[any, object] | any>;
    plugins: Array<[any, object] | any>;
  }>;
}

Core Configuration Options

targets

  • Type: string | string[] | object
  • Default: Browserslist config or auto-detected based on environment
  • Description: Browser/environment targets for transpilation
// Examples
targets: { ie: 9, chrome: 58 }
targets: '> 1%, last 2 versions'
targets: { node: 'current' } // Automatically set in test environment

useBuiltIns

  • Type: 'usage' | 'entry' | false
  • Default: 'usage'
  • Description: Strategy for including polyfills
// Usage-based polyfill injection (default)
useBuiltIns: 'usage'

// Manual polyfill entry
useBuiltIns: 'entry'

// No automatic polyfills
useBuiltIns: false

modules

  • Type: 'amd' | 'umd' | 'systemjs' | 'commonjs' | 'cjs' | 'auto' | false
  • Default: false (preserve ES modules), 'commonjs' in Jest tests
  • Description: Module format for output

Vue-Specific Options

polyfills

  • Type: string[]
  • Default: ['es.array.iterator', 'es.promise', 'es.object.assign', 'es.promise.finally']
  • Description: Core-js polyfills to pre-include when using useBuiltIns: 'usage'
polyfills: [
  'es.promise',
  'es.object.assign',
  'es.array.includes'
]

jsx

  • Type: boolean | object
  • Default: true
  • Description: Enable Vue JSX support and pass options to JSX plugins
// Enable JSX (default)
jsx: true

// Disable JSX
jsx: false

// JSX with options (Vue 2)
jsx: {
  injectH: false,
  vModel: false
}

// JSX with options (Vue 3)
jsx: {
  transformOn: true,
  optimize: false
}

entryFiles

  • Type: string[]
  • Default: [] (from VUE_CLI_ENTRY_FILES environment variable)
  • Description: List of entry files for polyfill injection in multi-page applications
entryFiles: [
  './src/main.js',
  './src/admin.js'
]

absoluteRuntime

  • Type: string | boolean
  • Default: Path to @babel/runtime package
  • Description: Use absolute paths for runtime helpers to ensure version consistency
// Use absolute path (default)
absoluteRuntime: '/path/to/node_modules/@babel/runtime'

// Use relative paths
absoluteRuntime: false

Advanced Options

loose

  • Type: boolean
  • Default: false
  • Description: Enable loose mode transforms for better performance but less spec compliance

decoratorsLegacy

  • Type: boolean
  • Default: true
  • Description: Use legacy decorator semantics

version

  • Type: string
  • Default: Version of installed @babel/runtime
  • Description: Runtime version for transform-runtime plugin

Environment Variables

The preset responds to several environment variables for automatic configuration:

interface EnvironmentVariables {
  VUE_CLI_BABEL_TARGET_NODE?: 'true'; // Set targets to { node: 'current' }
  VUE_CLI_BABEL_TRANSPILE_MODULES?: 'true'; // Set modules to 'commonjs'
  VUE_CLI_BUILD_TARGET?: 'app' | 'wc' | 'wc-async'; // Adjust targets for build type
  VUE_CLI_MODERN_BUILD?: 'true'; // Use modern browser targets
  VUE_CLI_ENTRY_FILES?: string; // JSON array of entry files
  VUE_CLI_TEST?: 'true'; // Test mode flag
  VUE_CLI_TRANSPILE_BABEL_RUNTIME?: 'true'; // Internal flag for @vue/cli-plugin-babel to transpile @babel/runtime
  NODE_ENV?: 'test' | 'development' | 'production'; // Automatic test mode detection
}

Return Value Structure

The preset returns a Babel configuration with specific overrides:

interface BabelConfigOutput {
  sourceType: 'unambiguous';
  overrides: [
    {
      // Main application code
      exclude: [/@babel[/|\\\\]runtime/, /core-js/];
      presets: Array<[any, object]>; // @babel/preset-env + Vue JSX presets
      plugins: Array<[any, object]>; // Transform plugins + polyfill injection
    },
    {
      // @babel/runtime transpilation
      include: [/@babel[/|\\\\]runtime/];
      presets: Array<[any, object]>; // @babel/preset-env only
    }
  ];
}

Usage Examples

Basic Vue CLI Project:

// babel.config.js (automatically generated by Vue CLI)
module.exports = {
  presets: [
    '@vue/babel-preset-app'
  ]
};

Custom Browser Targets:

module.exports = {
  presets: [
    ['@vue/babel-preset-app', {
      targets: {
        browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
      }
    }]
  ]
};

Library Mode (No Polyfills):

module.exports = {
  presets: [
    ['@vue/babel-preset-app', {
      useBuiltIns: false,
      jsx: false
    }]
  ]
};

Node.js/Testing Configuration:

module.exports = {
  presets: [
    ['@vue/babel-preset-app', {
      targets: { node: 'current' },
      modules: 'commonjs'
    }]
  ]
};

Multi-page Application:

module.exports = {
  presets: [
    ['@vue/babel-preset-app', {
      entryFiles: [
        './src/main.js',
        './src/admin.js',
        './src/mobile.js'
      ]
    }]
  ]
};

Error Handling

The preset includes validation for polyfill names:

// Will throw error if polyfill doesn't exist in core-js-compat
polyfills: ['invalid.polyfill'] // Error: Cannot find polyfill invalid.polyfill

Common error patterns:

  • Invalid polyfill names are validated against core-js-compat
  • Missing peer dependencies (Vue, @babel/core, core-js) will cause runtime errors
  • Conflicting options between preset-env and custom settings are resolved with preset defaults

Types

interface DefaultPolyfills {
  'es.array.iterator': string;
  'es.promise': string;
  'es.object.assign': string;
  'es.promise.finally': string;
}

interface PolyfillPlugin {
  name: 'vue-cli-inject-polyfills';
  visitor: {
    Program(path: any, state: { filename: string }): void;
  };
}

interface TargetEnvironments {
  browsers?: string | string[];
  node?: string | 'current';
  esmodules?: boolean;
  chrome?: string;
  firefox?: string;
  safari?: string;
  edge?: string;
  ie?: string;
  ios?: string;
  android?: string;
  electron?: string;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/babel-preset-app@5.0.x
Publish Source
CLI
Badge
tessl/npm-vue--babel-preset-app badge