@rzbz/gulp-ts-alias v2.3.2

Fixed incomplete relative path generated

Added addJsExtension option

npm i @rzbz/gulp-ts-alias

@gulp-plugin/alias

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'