gulp-ts-alias 상대 경로 문제

문제 사항

신규 프로젝트 구축하면서 gulp-ts-alias 라이브러리를 설치하였습니다. (기존 사용 경험 有)
적용 후 빌드 시, alias를 통해 변경된 경로가 해당 dest 폴더를 기준으로 상대경로가 되지 않고, 원본 파일 경로(src)를 기준으로 상대경로를 생성합니다.

🚨 참고사항
라이브러리 유지/관리를 위해 v2.0.0 부터 @gulp-plugin/alias로 변경되었습니다.

현재 설정 상태

tsconfig.json

"rootDir": "src",
"baseUrl": "./",
"paths": {
  "@/*": ["src/*"]
}

gulpfile.ts

import { dest, lastRun, series, src } from "gulp";
import ts from "gulp-typescript";
import alias from "@gulp-plugin/alias";

const tsProject = ts.createProject("tsconfig.json");
const tsConfig = tsProject.config;
const tsOption = tsProject.options;
const OUT_PATH = tsOption.outDir || "dist";
const TRANSPILE_PATH = tsConfig.include || "./src/**/*.ts";

const transpile = () =>
  src(TRANSPILE_PATH, {
    allowEmpty: true,
    since: lastRun(transpile),
    sourcemaps: true,
  })
    .pipe(tsProject())
    .pipe(alias({ config: tsOption })) // docs 처럼 설정
    .pipe(
      dest(OUT_PATH, {
        sourcemaps: ".",
      }),
    );

export const build = series(transpile);

폴더 구조

index.ts에서 test1.ts와 test2.ts을 import 합니다.
각 test파일에는 내용이 없습니다. (export default {})

결과

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var express_1 = __importDefault(require("express"));
var test1_1 = __importDefault(require("../src/test1")); // 이부분!!!😡
var test2_1 = __importDefault(require("../src/testforder/test2")); // 이부분!!!😡
console.log(test1_1.default);
console.log(test2_1.default);
var app = (0, express_1.default)();
var PORT = 3001;
app.listen(PORT, function () {
    console.log("Listening on port ".concat(PORT));
});

src의 하위 파일을 자꾸 참조하여 빌드가 됩니다..
왜이러는건지 모르겠네요..

💡 혹시 뭔가 잘못됐다면 꼭 좀 알려주세요 제발 :(

해결 방안

해결 방안은 아니지만,, 필자는 해당 라이브러리의 이전 버전인 v1.3.0를 사용하였습니다.

변경된 내역

설치

# @gulp-plugin/alias 제거
$ npm uninstall @gulp-plugin/alias

# gulp-ts-alias 1.3.0 version 설치
$ npm i -D gulp-ts-alias@1.3.0

gulpfile.ts

import { dest, lastRun, series, src } from "gulp";
import ts from "gulp-typescript";
import alias from "gulp-ts-alias";

const tsProject = ts.createProject("tsconfig.json");
const tsConfig = tsProject.config;
const tsOption = tsProject.options;
const OUT_PATH = tsOption.outDir || "dist";
const TRANSPILE_PATH = tsConfig.include || "./src/**/*.ts";

interface IGulpTSAliasPaths {
  [key: string]: string[] | undefined;
}

const transpile = () =>
  src(TRANSPILE_PATH, {
    allowEmpty: true,
    since: lastRun(transpile),
    sourcemaps: true,
  })
    .pipe(
      alias({
        configuration: {
          paths: tsOption.paths as IGulpTSAliasPaths,
        },
      }),
    )
    .pipe(tsProject())
    .pipe(
      dest(OUT_PATH, {
        sourcemaps: ".",
      }),
    );

export const build = series(transpile);

결과

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const test1_1 = __importDefault(require("./test1")); // 이부분😅
const test2_1 = __importDefault(require("./testforder/test2")); // 이부분😅
console.log(test1_1.default);
console.log(test2_1.default);
const app = (0, express_1.default)();
const PORT = 3001;
app.listen(PORT, () => {
    console.log(`Listening on port ${PORT}`);
});

---

의견은 언제든 댓글로 남겨주세요. 🙂