ajcwebdev

esbuild go fast

esbuildgofast

If you've heard of esbuild you've probably seen this picture.

Alt Text

Okay, sounds good.

Setup

Create root directory and install esbuild 

mkdir ajcwebdev-esbuild
cd ajcwebdev-esbuild
npm i esbuild
added 7 packages, and audited 8 packages in 1s

found 0 vulnerabilities

Rocket emoji

Create a React app

Install React, ReactDOM, and create app.jsx 

npm i react react-dom
touch app.jsx

Create a greeting 

// app.jsx

import * as React from 'react'
import * as Server from 'react-dom/server'

let Greet = () => <h1>Hello, world but really really fast!</h1>

console.log(
  Server.renderToString(
    <Greet />
  )
)

Bundle the file 

./node_modules/.bin/esbuild app.jsx --bundle --outfile=out.js

This creates a file called out.js containing your code and the React library bundled together. It is no longer dependent on node_modules. Think about that for a second.

Run that sucker 

node out.js
<h1 data-reactroot="">
  Hello, world but really really fast!
</h1>