@web/dev-server-esbuild

Dev Server esbuild

This package is still experimental. Let us know if you find any issues!

esbuild plugin for @web/test-runner-server and es-dev-server.

esbuild is a blazing fast build tool, and can be used to transform TS and JSX to JS. It can also transform modern JS to older JS for older browsers.

Usage

Install the package:

npm i -D @web/dev-server-esbuild

In es-dev-server

Create a es-dev-server.config.js file:

const esBuildPlugin = require('@web/dev-server-esbuild');

module.exports = {
  plugins: [esbuildPlugin({ ts: true })],
};

In @web/test-runner

Create a web-test-runner.config.js file:

const esBuildPlugin = require('@web/dev-server-esbuild');

module.exports = {
  devServer: {
    plugins: [],
  },
};

Confiugration

We expose the following options for esbuild:

interface EsBuildPluginArgs {
  target?: Target;
  js?: boolean;
  jsx?: boolean;
  ts?: boolean;
  tsx?: boolean;
  jsxFactory?: string;
  jsxFragment?: string;
  define?: { [key: string]: string };
}

Some examples:

Typescript:

Transform all .ts files to javascript:

esbuildPlugin({ ts: true });

JSX:

Transform all .jsx files to javascript:

esbuildPlugin({ jsx: true });

By default, jsx gets transformed to React.createElement calls. You can change this to the JSX style you are using.

For example when importing from preact like this:

import { h, Fragment } from 'preact';

esbuildPlugin({ jsx: true, jsxFactory: 'h', jsxFragment: 'Fragment' });

TSX

Transform all .tsx files to javascript:

esbuildPlugin({ tsx: true });
esbuildPlugin({ tsx: true, jsxFactory: 'h', jsxFragment: 'Fragment' });

JS

Transform JS to older versions of JS:

esbuildPlugin({ js: true, target: 'es2015' });