or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-coffee-loader

Webpack loader that compiles CoffeeScript files to JavaScript during the build process

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/coffee-loader@5.0.x

To install, run

npx @tessl/cli install tessl/npm-coffee-loader@5.0.0

index.mddocs/

Coffee Loader

Coffee-loader is a webpack loader that compiles CoffeeScript files to JavaScript during the webpack build process. It integrates seamlessly with webpack's module system, enabling developers to use CoffeeScript in their web applications while maintaining full compatibility with modern webpack features.

Package Information

  • Package Name: coffee-loader
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev coffeescript coffee-loader

Core Imports

The coffee-loader is imported and configured through webpack configuration:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        loader: "coffee-loader",
      },
    ],
  },
};

Alternative inline usage:

import coffee from "coffee-loader!./file.coffee";

Basic Usage

CoffeeScript file (file.coffee):

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

Webpack configuration:

module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        loader: "coffee-loader",
        options: {
          bare: false,
          transpile: {
            presets: ["@babel/env"],
          },
        },
      },
    ],
  },
};

Capabilities

CoffeeScript Compilation

The main loader function that compiles CoffeeScript source code to JavaScript within the webpack build process.

/**
 * Main webpack loader function for CoffeeScript compilation
 * @param source - CoffeeScript source code string
 * @returns Compiled JavaScript via webpack async callback
 */
function loader(source: string): void;

This function:

  • Uses webpack's getOptions() to retrieve loader configuration
  • Calls CoffeeScript compiler with merged options
  • Generates source maps when enabled
  • Handles compilation errors through CoffeeScriptError wrapper
  • Returns compiled JavaScript and source maps via webpack's async callback

Error Handling

Custom error class for CoffeeScript compilation errors.

/**
 * Custom error class for CoffeeScript compilation errors
 * Wraps original CoffeeScript errors for webpack error reporting
 */
class CoffeeScriptError extends Error {
  constructor(error: Error);
  name: "CoffeeScriptError";
}

Configuration Options

All CoffeeScript compiler options are supported. Key options include:

interface CoffeeLoaderOptions {
  /** Compile without function wrapper (default: true) */
  bare?: boolean;
  
  /** Generate source maps (inherits from webpack devtool by default) */
  sourceMap?: boolean;
  
  /** Enable literate CoffeeScript mode */
  literate?: boolean;
  
  /** Babel transpilation options for modern JS support */
  transpile?: {
    presets?: string[];
    plugins?: string[];
  };
  
  /** Source filename (automatically set by webpack, user value ignored) */
  filename?: string;
  
  /** All other CoffeeScript compiler options are supported */
  [key: string]: any;
}

Configuration Examples

Basic Configuration

module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        loader: "coffee-loader",
      },
    ],
  },
};

CoffeeScript with Babel Transpilation

For modern JavaScript features and browser compatibility:

module.exports = {
  module: {
    rules: [
      {
        test: /\.coffee$/,
        loader: "coffee-loader",
        options: {
          bare: false,
          transpile: {
            presets: ["@babel/env"],
          },
        },
      },
    ],
  },
};

Literate CoffeeScript

For .litcoffee files:

module.exports = {
  module: {
    rules: [
      {
        test: /\.litcoffee$/,
        loader: "coffee-loader",
        options: {
          literate: true,
        },
      },
    ],
  },
};

Dependencies

Peer Dependencies

  • coffeescript (>= 2.0.0): CoffeeScript compiler
  • webpack (^5.0.0): Webpack module bundler

Optional Dependencies

  • @babel/core: Required when using transpile option
  • @babel/preset-env: Common preset for Babel transpilation

Error Handling

Compilation errors are wrapped in the CoffeeScriptError class and passed to webpack's error handling system. Common errors include:

  • Syntax errors: Invalid CoffeeScript syntax
  • Compilation failures: CoffeeScript compiler issues
  • Configuration errors: Invalid loader options

Errors maintain original CoffeeScript error information while providing webpack-compatible error reporting.

Types

/**
 * Webpack loader context interface (subset relevant to coffee-loader)
 */
interface WebpackLoaderContext {
  /** Get validated loader options */
  getOptions(schema?: object): any;
  
  /** Async callback for loader results */
  async(): (error: Error | null, content?: string, sourceMap?: object) => void;
  
  /** Source map setting from webpack devtool */
  sourceMap: boolean;
  
  /** Current resource file path */
  resourcePath: string;
}

/**
 * CoffeeScript compilation result structure
 */
interface CoffeeScriptResult {
  /** Compiled JavaScript code */
  js: string;
  
  /** Source map in v3 format (when sourceMap enabled) */
  v3SourceMap?: string;
}