configure-bundler-build

Configure JavaScript and TypeScript bundlers for dual ESM/CJS output.

9|3|Updated Jun 13, 2026
One-click install
npx skills add https://github.com/Sir-chawakorn/sanook-cli --skill configure-bundler-build
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: configure-bundler-build
Source: https://github.com/Sir-chawakorn/sanook-cli/tree/main/skills/configure-bundler-build
Command: npx skills add https://github.com/Sir-chawakorn/sanook-cli --skill configure-bundler-build

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill resolves complex configuration issues in JavaScript and TypeScript build pipelines, such as incorrect module formats, broken tree-shaking, missing type declarations, and slow build performance.

Core Features & Use Cases

  • Build Toolchain Optimization: Selects and configures the appropriate bundler (Vite, tsup, esbuild, or Rollup) based on whether you are building an application, a library, or a CLI tool.
  • Module & Type Resolution: Fixes common issues with ESM/CJS dual-package output, module resolution strategies, and missing declaration files.
  • Performance & Safety: Implements code-splitting, tree-shaking, and sourcemap generation while ensuring environment variables are handled securely without leaking secrets into client bundles.

Quick Start

Use the configure-bundler-build skill to analyze my current project structure and recommend the optimal bundler configuration for a dual-format library.

Frequently Asked Questions about configure-bundler-build

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure a dual ESM and CJS output for a TypeScript library?

To configure dual ESM and CJS output for a TypeScript library, you need to select a bundler like Vite or tsup and adjust its module resolution settings to generate both formats simultaneously. This ensures broad package compatibility while maintaining correct tree-shaking.

Why does tree-shaking break in my Vite build and how do I fix it?

Tree-shaking breaks in your Vite build usually due to incorrect module format configurations or improper import syntax in the codebase. Optimizing the build toolchain configuration addresses these issues by enforcing strict ESM resolution and eliminating side effects.

What's the best way to generate TypeScript declaration files during a bundler build?

The best way to generate TypeScript declaration files during a bundler build is to configure your chosen bundler toolchain to emit `.d.ts` files alongside the compiled JavaScript output to ensure accurate type resolution for consumers.

Can I securely inject environment variables into an esbuild bundle without leaking secrets?

Yes, you can securely inject environment variables into an esbuild bundle by configuring the build toolchain to explicitly define safe variables during the compilation process. This prevents sensitive secrets from leaking into the final client bundle.

How do I resolve path aliases when building a Node.js CLI tool with esbuild?

To resolve path aliases when building a Node.js CLI tool with esbuild, you must update the bundler configuration to map alias paths to their actual file system locations. This ensures correct module resolution and successful compilation.

Does my project need a specific bundler configuration for building applications versus libraries?

Yes, building applications versus libraries requires different bundler configurations because each context has distinct module output, tree-shaking, and type declaration requirements. Selecting the appropriate tool like Vite or Rollup ensures optimal build performance.