typescript-path-fix
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    typescript-path-fix

    Fix path resolution when compiling typescript.

    Why you need this module?

    As you know, Typescript introduced the flexible way of resolving paths using a mapping inside "tsconfig.json". Those paths are prefixed with symbol "@". Unfortunately, those paths do not work when compiling typescript to JavaScript. This package resolves this issue by replacing them with relative paths and setting the files extensions. You need to execute this package after compiling typescript in your pipeline.


    Typescript do not support to import or export files with extension ".mjs". Because of this restriction, you need to execute this package on the compiled code. Otherwise, you can execute this package before or after the typescript compilation process.


    //* Convert flexible typescript path like:
    import { abc } from '@src/some/file';
    // And
    const myLib = await import('@lib/somelib');
    // And
    export * from '@src/some/file';
    
    //* Into supported javascript relative paths:
    import { abc } from '../some/file.js';
    // OR
    import { abc } from '../some/file/index.js';
    
    const myLib = await import('../lib/somelib/index.js');
    export * from './some/file.js';
    
    // OR any extension: .mjs or .cjs

    Using with Gulp

    Gulp is the wildly used task runner for NodeJS.

    Using old CommonJs

    const { src, dest }= require('gulp');
    const { Converter }= require('typescript-path-fix');
    const GulpTypescript = require('gulp-typescript');
    
    // Create your compiling logic
    const TsProject = GulpTypescript.createProject('tsconfig.json');
    
    // Create Converter instance
    const tsPathFix = new Converter('tsconfig.json');
    
    /** Your compiler function */
    export.default= function(){
    	return src('src/**/*.ts')
    		// COMPILE TS TO JS
    		.pipe(TsProject())
    		// EXEC CONVERTER
    		.pipe(tsPathFix.gulp())
    		.pipe(dest('dist'));
    };

    Using typescript or Js modules

    import Gulp from 'gulp';
    import GulpTypescript from 'gulp-typescript';
    import { Converter } from 'typescript-path-fix';
    
    // -> because Gulp is a commonjs module
    const { src, dest } = Gulp;
    
    //* Init your converter
    const tsPathFix = new Converter('tsconfig.json');
    
    //* Init your typescript compiler
    const TsProject = GulpTypescript.createProject('tsconfig.json');
    
    /** Your compiler function */
    export default function () {
    	return (
    		src('src/**/*.ts')
    			// COMPILE TS TO JS
    			.pipe(TsProject())
    			// EXEC CONVERTER
    			.pipe(tsPathFix.gulp())
    			.pipe(dest('dist'))
    	);
    }

    Make your app to support both old CommonJs and new ESNEXT

    import Gulp from 'gulp';
    import GulpTypescript from 'gulp-typescript';
    import { Converter } from 'typescript-path-fix';
    
    // -> because Gulp is a commonjs module
    const { src, dest } = Gulp;
    
    //* Init your converter
    const tsPathFix = new Converter('tsconfig.json');
    
    //* Init typescript compiler for CommonJs
    const TsProjectCommonJs = GulpTypescript.createProject('tsconfig.json');
    //* Init typescript compiler for ESNEXT
    const TsProjectEsnext = GulpTypescript.createProject('tsconfig.json', {
    	target: 'ESNext',
    	module: 'ESNext'
    });
    
    /** Your compiler function */
    export function compileCommonJS() {
    	return (
    		src('src/**/*.ts')
    			// COMPILE TS TO JS
    			.pipe(TsProjectCommonJs())
    			// EXEC CONVERTER
    			.pipe(tsPathFix.gulp())
    			.pipe(dest('dist/commonjs'))
    	);
    }
    
    export function compileEsnext() {
    	return (
    		src('src/**/*.ts')
    			// COMPILE TS TO JS
    			.pipe(TsProjectEsnext())
    			// EXEC CONVERTER: Set target extension to ".mjs"
    			.pipe(tsPathFix.gulp('.mjs'))
    			.pipe(dest('dist/esnext'))
    	);
    }

    Compile using an other task runner or standalone:

    In this case, write your own adapter for your task runner or use it as standalone as follow:

    import { Converter } from 'typescript-path-fix';
    
    //* Start by creating the converter object
    const tsPathFix = new Converter('tsconfig.json');
    
    //* Compile your file
    var fileContent: string= tsPathFix.convert(
    	/**
    	 * Path to target source file
    	 */
    	filePath: string,
    	/**
    	 * @Optional file content. If missing, the module will load it Synchronously
    	 */
    	contents?: Buffer | string,
    	/**
    	 * @Optional Destination file extension,
    	 * @default ".js"
    	 */
    	targetExt: '.js' | '.mjs' | '.cjs' = '.js'
    	);

    Author

    khalid RAFIK Senior full Stack Web, Mobile, Data & Security Engineer khalid.rfk@gmail.com

    Install

    npm i typescript-path-fix

    DownloadsWeekly Downloads

    3

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    70.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • rafikalid2