gulp-ts-alias
Resolve TypeScript import aliases and paths defined in tsconfig
.
Install
npm install --save-dev @dhkatz/gulp-ts-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:
Note: Imports within multiline comments may also be replaced.
Usage
const typescript = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const alias = require('gulp-ts-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';