@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

1const typescript = require('gulp-typescript');
2const sourcemaps = require('gulp-sourcemaps');
3const alias = require('@gulp-plugin/alias');
4
5const { config } = typescript.createProject('tsconfig.json');
6
7function build() {
8  const compiled = src('./src/**/*.ts')
9    .pipe(alias(config))
10    // or .pipe(alias('tsconfig.json'))
11    // or even .pipe(alias())
12    .pipe(sourcemaps.init())
13    .pipe(project());
14
15  return compiled.js
16    .pipe(sourcemaps.write({ sourceRoot: file => path.relative(path.join(file.cwd, file.path), file.base) }))
17    .pipe(dest('build/'))
18}

Example

The following configuration is common in tsconfig configuration files

1{
2  "rootDir": "./src",
3  "baseUrl": ".",
4  "paths": {
5    "@/*": ["src/*"]
6  }
7}

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

Input:

1import express from 'express';
2
3import A from './file'; // Normal relative import
4
5// Aliased import, resolves to some relative path to rootDir
6import B from '@/components';

Output:

1import express from 'express';
2
3import A from './file';
4
5// gulp-ts-alias finds the correct relative path
6// and replaces it before compilation
7import B from '../../components';