CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-laravel-mix

Laravel Mix provides a clean, fluent API for defining webpack build steps for JavaScript and CSS compilation.

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

javascript-compilation.mddocs/

JavaScript Compilation

Modern JavaScript and TypeScript compilation with Babel configuration and framework support. Laravel Mix handles ES6+ transformation, module bundling, and TypeScript compilation through webpack and Babel.

Capabilities

JavaScript Compilation

Compiles modern JavaScript files using Babel and webpack. Supports ES6+ features, imports, and module bundling.

/**
 * Compile modern JavaScript files
 * @param src - Source file path or array of paths (supports glob patterns)
 * @param output - Output file path
 * @returns Mix API instance for chaining
 */
js(src: string | string[], output: string): Api;

Usage Examples:

const mix = require('laravel-mix');

// Single file compilation
mix.js('resources/js/app.js', 'public/js');

// Multiple source files into one output
mix.js([
  'resources/js/app.js',
  'resources/js/utils.js'
], 'public/js/combined.js');

// Glob patterns
mix.js('resources/js/**/*.js', 'public/js/all.js');

TypeScript Compilation

Compiles TypeScript files to JavaScript with full type checking and ES6+ output.

/**
 * Compile TypeScript files to JavaScript
 * @param src - Source file path or array of paths (supports glob patterns)
 * @param output - Output file path
 * @param options - TypeScript loader options
 * @returns Mix API instance for chaining
 */
ts(src: string | string[], output: string, options?: Partial<Options>): Api;

/**
 * Alias for ts() method
 */
typeScript(src: string | string[], output: string, options?: Partial<Options>): Api;

interface Options {
  transpileOnly?: boolean;
  compilerOptions?: object;
  configFile?: string;
  context?: string;
  logLevel?: string;
  onlyCompileBundledFiles?: boolean;
}

Usage Examples:

const mix = require('laravel-mix');

// Basic TypeScript compilation
mix.ts('resources/ts/app.ts', 'public/js');

// With custom TypeScript options
mix.ts('resources/ts/app.ts', 'public/js', {
  transpileOnly: true,
  compilerOptions: {
    target: 'es2018',
    strict: true
  }
});

// Multiple TypeScript files
mix.ts([
  'resources/ts/app.ts',
  'resources/ts/admin.ts'
], 'public/js/combined.js');

CoffeeScript Compilation

Compiles CoffeeScript files to JavaScript for legacy support.

/**
 * Compile CoffeeScript files to JavaScript
 * @param src - Source file path or array of paths (supports glob patterns)
 * @param output - Output file path
 * @returns Mix API instance for chaining
 */
coffee(src: string | string[], output: string): Api;

Usage Examples:

const mix = require('laravel-mix');

// Basic CoffeeScript compilation
mix.coffee('resources/coffee/app.coffee', 'public/js');

// Multiple CoffeeScript files
mix.coffee([
  'resources/coffee/app.coffee',
  'resources/coffee/utils.coffee'
], 'public/js/app.js');

Babel Configuration

Customize Babel transformation settings for JavaScript compilation.

/**
 * Override the default Babel configuration
 * @param config - Babel configuration object
 * @returns Mix API instance for chaining
 */
babelConfig(config: BabelConfig): Api;

interface BabelConfig {
  presets?: Array<string | [string, object]>;
  plugins?: Array<string | [string, object]>;
  exclude?: string | RegExp | Array<string | RegExp>;
  include?: string | RegExp | Array<string | RegExp>;
  babelrc?: boolean;
  configFile?: boolean | string;
}

Usage Examples:

const mix = require('laravel-mix');

// Custom Babel preset configuration
mix.babelConfig({
  presets: [
    ['@babel/preset-env', {
      targets: {
        browsers: ['> 1%', 'last 2 versions']
      }
    }]
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import'
  ]
});

mix.js('resources/js/app.js', 'public/js');

Integration Notes

  • JavaScript compilation automatically includes Babel transformation for modern browser compatibility
  • TypeScript compilation includes both type checking and Babel transformation
  • All JavaScript methods support glob patterns for flexible file selection
  • Output files are automatically optimized and minified in production mode
  • Source maps are generated when mix.sourceMaps() is enabled
  • Hot module replacement is supported for all JavaScript compilation methods

docs

build-features.md

configuration.md

css-preprocessing.md

file-operations.md

framework-integration.md

index.md

javascript-compilation.md

tile.json