Laravel Mix provides a clean, fluent API for defining webpack build steps for JavaScript and CSS compilation.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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.
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');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');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');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');mix.sourceMaps() is enabled