Laravel Mix esbuild

Laravel Mix extension to replace babel-loader with esbuild.

This extension provides support for esbuild-loader in Laravel Mix.

• Installation
• Usage
• Presets
• Options
• Changelog

Installation

Install the extension:

npm install laravel-mix-esbuild --save-dev

Or if you prefer yarn:

yarn add laravel-mix-esbuild --dev

Usage

Require the extension within your webpack.mix.js file:

// webpack.mix.js
const mix = require('laravel-mix');

require('laravel-mix-esbuild');

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

Presets

Use with React

If you're using react, use the following preset:

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

⚠️ The react and react-tsx presets might require you to add acorn to your dependencies:

npm install acorn --save-dev

Or if you prefer yarn:

yarn add acorn --dev

Use with TypeScript

If you're using Typescript you can use the ts or tsx presets:

mix.js('resources/js/app.js', 'public/js')
    .esbuild('ts'); // or tsx

Your tsconfig.json should include the following entries:

{
	"compilerOptions": {
		// Highly recommended TS configurations to match behavior with esbuild
		// https://esbuild.github.io/content-types/#typescript
		"isolatedModules": true,
		"esModuleInterop": true
	}
}

If you have a tsconfig.json file, esbuild-loader will automatically detect it.

Alternatively, you can also pass it in directly via the tsconfigRaw option:

mix.js('resources/js/app.js', 'public/js')
    .esbuild('ts', {
        tsconfigRaw: require('./tsconfig.json')
    });

⚠️ esbuild only supports a subset of tsconfig options, see esbuild-loader for more information.

Use with React and Typescript

If you're using react with Typescript, use the following preset:

mix.js('resources/js/app.js', 'public/js')
    .esbuild('react-tsx');

⚠ You should configure your tsconfig.json file like mentionned above.

JSX without React

If you're using JSX without React, use the jsx preset:

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

Here is a JSX without React example: https://betterprogramming.pub/how-to-use-jsx-without-react-21d23346e5dc.

Use with Vue

It seems that the way esbuild-loader is built doesn't allow the support of Vue. Vue might work if .vue Single File Component are not used.

Options

You can pass custom options to the extension using the second argument. Full list of options available: esbuild-loader.

Change target

To sets the target environment for the generated JavaScript code, pass one of the possible value to the target option. Default target is es2015.

mix.js('resources/js/app.js', 'public/js')
    .esbuild(null, {
        target: 'esnext'
    });

License

Laravel Mix esbuild is provided under the MIT License.