Last Updated: September 02, 2021
·
39
· Sophie I

ESBuild + css modules & watch

Setup

  • Add scripts to your package.json "scripts": { "build": "node build", "build:watch": "yarn build --watch" },
  • Create a build.js file at the root of your project.

#!/usr/bin/env node
const esbuild = require('esbuild');
const cssModulesPlugin = require('esbuild-css-modules-plugin');
const [watch = null] = process.argv.reverse();

esbuild
  .build({
    watch: !!watch,
    logLevel: 'info',
    entryPoints: ['src/index.jsx'],
    bundle: true,
    define: { global: 'window' },
    outfile: 'build/bundle.js',
    plugins: [cssModulesPlugin()],
  })
  .catch(() => process.exit(1));

Dependencies for reference

├── esbuild@0.12.24
├── esbuild-css-modules-plugin@2.0.9
├── react@17.0.2
├── react-dom@17.0.2