https://github.com/gulp-plugin/alias

Resolve TypeScript import aliases and paths.
https://github.com/gulp-plugin/alias

alias-resolver gulp javascript nodejs tsconfig-paths typescript

Last synced: about 2 months ago
JSON representation

Resolve TypeScript import aliases and paths.

• Host: GitHub
• URL: https://github.com/gulp-plugin/alias
• Owner: gulp-plugin
• License: mit
• Created: 2019-01-23T22:14:07.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-05-03T17:00:06.000Z (over 1 year ago)
• Last Synced: 2024-10-28T01:36:40.780Z (about 2 months ago)
• Topics: alias-resolver, gulp, javascript, nodejs, tsconfig-paths, typescript
• Language: TypeScript
• Homepage:
• Size: 988 KB
• Stars: 20
• Watchers: 0
• Forks: 11
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @gulp-plugin/alias ![npm (custom registry)](https://img.shields.io/npm/v/@gulp-plugin/alias?logo=npm) [![GitHub Package Registry version](https://img.shields.io/github/release/gulp-plugin/alias.svg?label=gpr&logo=github)](https://github.com/gulp-plugin/alias/packages/896973)

[![Build](https://github.com/dhkatz/gulp-ts-alias/actions/workflows/node.js.yml/badge.svg)](https://github.com/dhkatz/gulp-ts-alias/actions/workflows/node.js.yml)

[![Coverage Status](https://coveralls.io/repos/github/dhkatz/gulp-ts-alias/badge.svg?branch=master)](https://coveralls.io/github/dhkatz/gulp-ts-alias?branch=master) [![dependencies Status](https://david-dm.org/gulp-plugin/alias/status.svg)](https://david-dm.org/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](https://www.npmjs.com/package/gulp-ts-paths)

[path-alias-resolver](https://gist.github.com/azarus/f369ee2ab0283ba0793b0ccf0e9ec590)

**Note:** Imports within multiline comments may also be replaced.

## Usage

```javascript

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

```json

{

  "rootDir": "./src",

  "baseUrl": ".",

  "paths": {

    "@/*": ["src/*"]

  }

}

```

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

Input:

```typescript

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:

```typescript

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';

```