@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

consttypescript=require('gulp-typescript');constsourcemaps=require('gulp-sourcemaps');constalias=require('@gulp-plugin/alias');const{ config }=typescript.createProject('tsconfig.json');functionbuild(){constcompiled=src('./src/**/*.ts').pipe(alias(config))// or .pipe(alias('tsconfig.json'))// or even .pipe(alias()).pipe(sourcemaps.init()).pipe(project());returncompiled.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:

importexpressfrom'express';importAfrom'./file';// Normal relative import// Aliased import, resolves to some relative path to rootDirimportBfrom'@/components';

Output:

importexpressfrom'express';importAfrom'./file';// gulp-ts-alias finds the correct relative path// and replaces it before compilationimportBfrom'../../components';