Esbuild setup with SCSS

Files structure


The project is organized with a very simple file structure. At the root, there is a build.js file which is the script that runs esbuild and compiles both the JavaScript and SCSS into production-ready code. The dist folder is where the compiled files end up — inside you’ll find main.min.js for the bundled JavaScript and main.min.css for the processed SCSS styles. The index.html file is just a basic entry point that includes those generated files so you can see the result in a browser. Alongside that you have package.json and package-lock.json which keep track of dependencies and scripts, while main.js is your actual source JavaScript file

.
├── build.js
├── dist
│   ├── main.min.css
│   └── main.min.js
├── index.html
├── package-lock.json
├── package.json
└── main.js

esbuild.js


The build.js script itself is responsible for running esbuild. It imports esbuild and the esbuild-sass-plugin, then defines a build process. The entry point is set to main.js, bundling is enabled so all imports are combined into one file, and the output is directed into the dist/main.min.js file. The Sass plugin ensures that SCSS files are also compiled into CSS during the process. The script finishes by logging either a success message or an error if something goes wrong.

const esbuild = require("esbuild");
const sassPlugin = require("esbuild-sass-plugin").sassPlugin;

async function build() {
    try {
        await esbuild.build({
            entryPoints: ["../main.js"],
            bundle: true,
            // minify: true,
            outfile: "dist/main.min.js",
            plugins: [sassPlugin()],
        });
        console.log("Build successful");
    } catch (error) {
        console.error("Error during build:", error);
    }
}

build();

package.json


The package.json file describes the project. It contains the project name, version, and description, and it defines npm scripts that make it easy to run builds. The build script simply runs node build.js, while the watch script uses Nodemon to automatically rebuild whenever JavaScript or SCSS files are changed. The development dependencies include esbuild, the SCSS plugin, Nodemon for watching files, and npm-run-all to manage multiple scripts.

{
  "name": "textarea-multiple-autocomplete",
  "version": "1.0.0",
  "description": "This is modified solution from this website: https://phuoc.ng/collection/mirror-a-text-area/add-autocomplete-to-your-text-area/",
  "main": "index.js",
  "scripts": {
    "build": "node build.js",
    "watch": "nodemon --watch src -e js,scss build.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "esbuild": "^0.19.10",
    "esbuild-sass-plugin": "^2.16.1",
    "nodemon": "^3.0.2",
    "npm-run-all": "^4.1.5"
  }
}


Finally, the dist folder holds the finished assets that you would actually load into your HTML. The index.html page then links to those compiled files, while the rest of the configuration ensures you can run a single command to compile everything you need for development or production.

Click to Copy