tessl/npm-snowpack

A lightning-fast frontend build tool designed to leverage JavaScript's native ESM system for unbundled development with instant browser updates.

1.22x

Overview

Eval results

Files

Build System

Name: tessl/npm-snowpack
Rating: 0.82 (1 reviews)
Author: tessl

The Snowpack build system transforms your unbundled development application into optimized production assets. It processes files through the plugin pipeline, handles dependency bundling, and optionally integrates with production bundlers for optimization.

Capabilities

Production Building

Build the application for production deployment with optimization and bundling.

/**
 * Build the project for production
 * @param commandOptions - Configuration and lockfile options
 * @returns Promise resolving to build result with file change monitoring
 */
function build(commandOptions: CommandOptions): Promise<SnowpackBuildResult>;

import { build, loadConfiguration } from "snowpack";

// Basic production build
const config = await loadConfiguration();
const result = await build({ config });

// Build with lockfile
const lockfile = await loadLockfile(process.cwd());
const result = await build({ config, lockfile });

console.log('Production build completed');

Watch Mode Building

Build with file watching for continuous development-like building.

/**
 * Build result interface for production builds
 */
interface SnowpackBuildResult {
  /** Register callback for file changes (watch mode only) */
  onFileChange: (callback: OnFileChangeCallback) => void;
  /** Shutdown build process */
  shutdown(): Promise<void>;
}

// Enable watch mode in configuration
const config = createConfiguration({
  buildOptions: {
    watch: true,
    out: 'dist'
  }
});

const result = await build({ config });

// Handle file changes during watch mode
result.onFileChange(({ filePath }) => {
  console.log(`File rebuilt: ${filePath}`);
});

// Shutdown watch mode
process.on('SIGINT', async () => {
  await result.shutdown();
  process.exit(0);
});

Build Pipeline

The build process follows these steps:

Clean Directory - Remove previous build output (if enabled)
Mount Files - Copy static files from mount points
Build Files - Process files through plugin pipeline
Build Dependencies - Bundle and optimize dependencies
Write to Disk - Output processed files
Optimize - Run production optimization (if not in watch mode)
Cleanup - Perform post-build cleanup

// The build process automatically handles:
// - TypeScript compilation
// - JSX transformation  
// - CSS processing
// - Asset optimization
// - Import resolution
// - Plugin transformations

Build Configuration

The build system behavior is controlled through the buildOptions section of the Snowpack configuration:

/**
 * Build system options
 */
interface BuildOptions {
  /** Output directory */
  out: string;
  /** Base URL for assets */
  baseUrl: string;
  /** Meta URL path for imports */
  metaUrlPath: string;
  /** Cache directory path */
  cacheDirPath: string;
  /** Clean output directory before build */
  clean: boolean;
  /** Generate source maps */
  sourcemap: 'inline' | false | undefined;
  /** Enable watch mode */
  watch: boolean;
  /** Generate HTML fragments */
  htmlFragments: boolean;
  /** JSX factory function */
  jsxFactory: string | undefined;
  /** JSX fragment function */
  jsxFragment: string | undefined;
  /** JSX import injection */
  jsxInject: string | undefined;
  /** Enable server-side rendering */
  ssr: boolean;
  /** Resolve proxy imports */
  resolveProxyImports: boolean;
}

// Example build configuration
const config = createConfiguration({
  buildOptions: {
    out: 'dist',
    baseUrl: '/',
    clean: true,
    sourcemap: 'inline',
    watch: false,
    ssr: false,
    jsxFactory: 'React.createElement',
    jsxFragment: 'React.Fragment'
  }
});

const result = await build({ config });

Optimization

Production builds can be optimized using bundlers and minifiers through the optimize configuration:

/**
 * Production optimization options
 */
interface OptimizeOptions {
  /** Entry points for bundling */
  entrypoints: 'auto' | string[] | ((options: {files: string[]}) => string[]);
  /** Enable module preloading */
  preload: boolean;
  /** Enable bundling */
  bundle: boolean;
  /** esbuild loader configuration */
  loader?: {[ext: string]: Loader};
  /** Source map generation */
  sourcemap: boolean | 'both' | 'inline' | 'external';
  /** Enable code splitting */
  splitting: boolean;
  /** Enable tree shaking */
  treeshake: boolean;
  /** Generate build manifest */
  manifest: boolean;
  /** Enable minification */
  minify: boolean;
  /** Target environment */
  target: 'es2020' | 'es2019' | 'es2018' | 'es2017';
}

// Example optimization configuration
const config = createConfiguration({
  optimize: {
    bundle: true,
    minify: true,
    treeshake: true,
    splitting: true,
    sourcemap: 'external',
    target: 'es2020',
    entrypoints: ['src/index.js'],
    preload: true,
    manifest: true
  }
});

const result = await build({ config });

Mount Points

Mount points define how directories are mapped to URLs in the built application:

/**
 * Mount point configuration
 */
interface MountEntry {
  /** URL path where directory is mounted */
  url: string;
  /** Serve files statically without processing */
  static: boolean;
  /** Enable file resolution */
  resolve: boolean;
  /** Include dotfiles */
  dot: boolean;
}

// Example mount configuration
const config = createConfiguration({
  mount: {
    // Mount src/ directory to root URL with processing
    'src': { url: '/', static: false, resolve: true },
    // Mount public/ directory statically
    'public': { url: '/', static: true, resolve: false },
    // Mount assets/ to /assets/ URL
    'assets': { url: '/assets', static: true, resolve: false }
  }
});

Built Files

The build system processes different file types through appropriate transformations:

JavaScript/TypeScript Files

Compiled to ES modules
Import statements resolved
Plugin transformations applied
Source maps generated (if enabled)

CSS Files

Processed through PostCSS
CSS Modules supported
Import resolution
Minification (if optimize enabled)

Static Assets

Copied to output directory
URL rewriting for imports
Optional optimization

HTML Files

Import resolution in script tags
Base URL rewriting
Fragment mode support

File Extensions

The build system handles these file extensions by default:

/**
 * Scannable file extensions for import analysis
 */
type ScannableExt =
  | '.astro'
  | '.cjs' 
  | '.css'
  | '.html'
  | '.interface'
  | '.js'
  | '.jsx'
  | '.less'
  | '.mjs'
  | '.sass'
  | '.scss'
  | '.svelte'
  | '.ts'
  | '.tsx'
  | '.vue';

Build Cache

Snowpack maintains a build cache to speed up subsequent builds:

// Cache is automatically managed but can be cleared
await clearCache();

// Cache location is configurable
const config = createConfiguration({
  buildOptions: {
    cacheDirPath: './custom-cache'
  }
});

Error Handling

Build errors are handled gracefully with detailed error reporting:

try {
  const result = await build({ config });
} catch (error) {
  console.error('Build failed:', error.message);
  console.error('Stack trace:', error.stack);
  process.exit(1);
}

Integration with Bundlers

Snowpack can integrate with traditional bundlers for production optimization:

// Example webpack plugin integration
const config = createConfiguration({
  plugins: [
    '@snowpack/plugin-webpack'
  ],
  optimize: {
    bundle: true,
    minify: true
  }
});

Install with Tessl CLI

npx tessl i tessl/npm-snowpack