@naverpay/pite

@naverpay/pite is a Vite bundler configuration package designed for building JavaScript and TypeScript libraries efficiently. It provides an optimized Vite configuration with support for multiple module formats (ESM and CJS), external dependency handling, and polyfill management.

Features

• 📦 Supports multiple formats: Builds ESM (.mjs) and CJS (.js) modules.
• 🚀 Optimized for library development: Uses Vite with Rollup for bundling.
• 🎯 Targeted transpilation: Leverages browserslist for precise ES build targets.
• 🔄 Automatic polyfill injection: Supports core-js polyfills with intelligent injection.
• 🔧 Customizable configurations: Allows overriding build options and external dependencies.
• 🏗 Preserves module structures: Keeps preserveModules for optimal tree-shaking.

Installation

Install @naverpay/pite as a development dependency:

npm install --save-dev @naverpay/pite

or using pnpm:

pnpm add -D @naverpay/pite

Usage

1. Create a Vite Config File

In your vite.config.ts, import and use createViteConfig:

import { createViteConfig } from '@naverpay/pite'

export default createViteConfig({
    cwd: process.cwd(), // Set working directory
    entry: ['src/index.ts'], // Entry files
    outputs: [
        { format: 'es', dist: 'dist/es' }, // ESM output directory
        { format: 'cjs', dist: 'dist/cjs' }, // CJS output directory
    ],
    cssFileName: 'style.css', // CSS file output name
    allowedPolyfills: ['fetch', 'Promise'], // Specify allowed polyfills
    ignoredPolyfills: ['Symbol'], // Specify ignored polyfills
    options: {
        minify: true, // Minification option
        sourcemap: true, // Enable sourcemaps
    },
})

2. Build Your Library

Run the following command to bundle your library:

vite build

This will generate the output files in the dist/es and dist/cjs directories.

Configuration Options

Option	Type	Description
cwd	string	The current working directory (default: '.').
entry	string[]	The entry file(s) for the library.
outputs	{format: 'es' | 'cjs'; dist: string}[]	Specifies the output formats and their respective directories.
cssFileName	string	The name of the output CSS file.
allowedPolyfills	string[]	List of allowed polyfills for injection.
ignoredPolyfills	string[]	List of ignored polyfills.
options	BuildOptions	Additional Vite build options.

External Dependencies

The createViteConfig function automatically detects external dependencies from package.json and excludes them from bundling. However, you can specify additional externals manually.

Polyfill Handling

@naverpay/pite includes intelligent polyfill injection using babel-plugin-polyfill-corejs3, ensuring that only the necessary polyfills are included in the build.

License

MIT License © 2025 NaverPay