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