gulp-plugin-alias
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.4 • Public • Published

    gulp-plugin-alias npm (custom registry) GitHub Package Registry version

    Build Coverage Status dependencies Status

    Resolve TypeScript import aliases and paths defined in tsconfig.

    Install

    npm install --save-dev gulp-plugin-alias

    Information

    Features

    • Supports all import types: import, require, await import()
    • Supports wild card aliases

    Motivation

    There have been previous attempts at releasing Gulp plugins that accomplish something similar, but all have become unmaintained.

    For legacy’s sake, here is a list of previous packages/scripts that have been considered:

    gulp-ts-paths

    path-alias-resolver

    Note: Imports within multiline comments may also be replaced.

    Usage

    const typescript = require('gulp-typescript');
    const sourcemaps = require('gulp-sourcemaps');
    const alias = require('gulp-plugin-alias');
    
    const { config } = typescript.createProject('tsconfig.json');
    
    function build() {
      const compiled = src('./src/**/*.ts')
        .pipe(alias(config))
        // or .pipe(alias('tsconfig.json'))
        // or even .pipe(alias())
        .pipe(sourcemaps.init())
        .pipe(project());
    
      return compiled.js
        .pipe(sourcemaps.write({ sourceRoot: file => path.relative(path.join(file.cwd, file.path), file.base) }))
        .pipe(dest('build/'))
    }

    Example

    The following configuration is common in tsconfig configuration files

    {
      "rootDir": "./src",
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
    }

    In practice, these path aliases are often used in this fashion

    Input:

    import express from 'express';
    
    import A from './file'; // Normal relative import
    
    // Aliased import, resolves to some relative path to rootDir
    import B from '@/components';

    Output:

    import express from 'express';
    
    import A from './file';
    
    // gulp-ts-alias finds the correct relative path
    // and replaces it before compilation
    import B from '../../components';

    Install

    npm i gulp-plugin-alias

    DownloadsWeekly Downloads

    7

    Version

    2.2.4

    License

    MIT

    Unpacked Size

    30.4 kB

    Total Files

    15

    Last publish

    Collaborators

    • mavis