gulp-ts-base-url

Resolve TypeScript import baseUrl defined in tsconfig.

Install

npm install --save-dev gulp-ts-bae-url

Information

Based on package https://github.com/gulp-plugin/alias

Features

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

Usage

const typescript = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const alias = require('gulp-ts-base-url');

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": "./src",
}

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

Input:

import express from 'express';

import A from './file'; // Normal relative import

// non-relative import based on baseUrl
import B from 'component/Grid';

Output:

import express from 'express';

import A from './file';

// finds the correct relative path
// and replaces it before compilation
import B from '../../components';