CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-awesome-typescript-loader

Awesome TS loader for webpack

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

configuration.mddocs/

Configuration

Comprehensive configuration system for awesome-typescript-loader allowing customization of TypeScript compilation, Babel integration, caching, and performance optimization.

Capabilities

Loader Configuration Interface

Main configuration interface for all loader options.

interface LoaderConfig {
  instance?: string;
  compiler?: string;
  configFileName?: string;
  configFileContent?: string;
  forceIsolatedModules?: boolean;
  errorsAsWarnings?: boolean;
  transpileOnly?: boolean;
  ignoreDiagnostics?: number[];
  compilerOptions?: ts.CompilerOptions;
  useTranspileModule?: boolean;
  useBabel?: boolean;
  babelCore?: string;
  babelOptions?: any;
  usePrecompiledFiles?: boolean;
  silent?: boolean;
  useCache?: boolean;
  cacheDirectory?: string;
  entryFileIsJs?: boolean;
  debug?: boolean;
  reportFiles?: string[];
  context?: string;
  getCustomTransformers?: string | ((program: ts.Program) => ts.CustomTransformers | undefined);
}

Core Options

Essential configuration options for TypeScript compilation.

interface CoreOptions {
  /** Instance name for multiple TypeScript compilers (default: 'at-loader') */
  instance?: string;
  
  /** Alternative TypeScript compiler package (default: 'typescript') */
  compiler?: string;
  
  /** Path to TypeScript config file (default: 'tsconfig.json') */
  configFileName?: string;
  
  /** Inline TypeScript config content */
  configFileContent?: string;
  
  /** Override TypeScript compiler options */
  compilerOptions?: ts.CompilerOptions;
  
  /** Base context directory */
  context?: string;
}

Usage Example:

module.exports = {
  module: {
    rules: [{
      test: /\.tsx?$/,
      loader: 'awesome-typescript-loader',
      options: {
        instance: 'my-app',
        compiler: 'typescript',
        configFileName: 'tsconfig.build.json',
        context: __dirname
      }
    }]
  }
};

Compilation Options

Options controlling TypeScript compilation behavior.

interface CompilationOptions {
  /** Disable type checking for faster compilation */
  transpileOnly?: boolean;
  
  /** Use fast transpileModule emit mode */
  useTranspileModule?: boolean;
  
  /** Force isolated module compilation */
  forceIsolatedModules?: boolean;
  
  /** Use pre-compiled .js/.map files if available */
  usePrecompiledFiles?: boolean;
  
  /** Whether entry file is JavaScript */
  entryFileIsJs?: boolean;
}

Usage Example:

{
  test: /\.tsx?$/,
  loader: 'awesome-typescript-loader',
  options: {
    transpileOnly: true,  // Skip type checking for speed
    forceIsolatedModules: true,  // Faster compilation
    useTranspileModule: true  // Use fast emit mode
  }
}

Error Handling Options

Configuration for error reporting and diagnostic handling.

interface ErrorHandlingOptions {
  /** Emit TypeScript errors as warnings instead of errors */
  errorsAsWarnings?: boolean;
  
  /** Array of TypeScript diagnostic codes to ignore */
  ignoreDiagnostics?: number[];
  
  /** Disable logging from checker */
  silent?: boolean;
  
  /** Enable debug logging */
  debug?: boolean;
  
  /** Glob patterns for files to report diagnostics */
  reportFiles?: string[];
}

Usage Example:

{
  test: /\.tsx?$/,
  loader: 'awesome-typescript-loader',
  options: {
    errorsAsWarnings: true,
    ignoreDiagnostics: [2307, 2345],  // Ignore specific error codes
    reportFiles: ['src/**/*.{ts,tsx}'],  // Only report errors for source files
    silent: false
  }
}

Babel Integration Options

Configuration for Babel transpilation after TypeScript compilation.

interface BabelOptions {
  /** Enable Babel transpilation after TypeScript */
  useBabel?: boolean;
  
  /** Path to babel-core package (use "@babel/core" for Babel 7) */
  babelCore?: string;
  
  /** Babel configuration options */
  babelOptions?: any;
}

Usage Example:

{
  test: /\.tsx?$/,
  loader: 'awesome-typescript-loader',
  options: {
    useBabel: true,
    babelCore: "@babel/core",
    babelOptions: {
      babelrc: false,
      presets: [
        ["@babel/preset-env", { 
          targets: "last 2 versions, ie 11", 
          modules: false 
        }]
      ]
    }
  }
}

Performance Options

Caching and performance optimization configuration.

interface PerformanceOptions {
  /** Enable internal file caching */
  useCache?: boolean;
  
  /** Directory for cache storage (default: '.awcache') */
  cacheDirectory?: string;
}

Usage Example:

{
  test: /\.tsx?$/,
  loader: 'awesome-typescript-loader',
  options: {
    useCache: true,
    cacheDirectory: '.webpack-cache'
  }
}

Advanced Options

Advanced configuration for custom transformers and specialized use cases.

interface AdvancedOptions {
  /** Custom TypeScript transformers */
  getCustomTransformers?: string | ((program: ts.Program) => ts.CustomTransformers | undefined);
}

Usage Example:

const styledComponentsTransformer = require('typescript-plugin-styled-components').default;

{
  test: /\.tsx?$/,
  loader: 'awesome-typescript-loader',
  options: {
    getCustomTransformers: program => ({
      before: [
        styledComponentsTransformer()
      ]
    })
  }
}

Configuration File Integration

The loader integrates with TypeScript configuration files (tsconfig.json).

/**
 * Read and parse TypeScript configuration file
 * @param context - Base directory context
 * @param config - Loader configuration
 * @param compilerOptions - Additional compiler options
 * @param tsImpl - TypeScript implementation
 * @returns Configuration file path and parsed compiler config
 */
function readConfigFile(
  context: string,
  config: LoaderConfig,
  compilerOptions: any,
  tsImpl: typeof ts
): {
  configFilePath: string;
  compilerConfig: ts.ParsedCommandLine;
};

Usage with tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  },
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "useBabel": true
  }
}

Multiple Instance Configuration

Support for multiple TypeScript compiler instances with different settings.

Usage Example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        include: path.resolve('src/app'),
        loader: 'awesome-typescript-loader',
        options: {
          instance: 'app-instance',
          configFileName: 'tsconfig.app.json'
        }
      },
      {
        test: /\.ts$/,
        include: path.resolve('src/worker'),
        loader: 'awesome-typescript-loader',
        options: {
          instance: 'worker-instance',
          configFileName: 'tsconfig.worker.json'
        }
      }
    ]
  }
};

Types

interface CompilerInfo {
  compilerPath: string;
  compilerVersion: string;
  tsImpl: typeof ts;
}

docs

configuration.md

core-loader.md

index.md

plugins.md

tile.json