Gulp Task to transform Typescript path imports into relative paths using the tsconfig

README.md

from this

import Head from '~components/Commons/Head';
require('~images/test.jpg')

to this

import Head from './../Commons/Head';
require('./../../images/test.jpg')

gulptask.js

var gulp = require('gulp')
var tsimport = require('./tsimport')

gulp.task('compile:source', function (done) {
  var tsProject = require('./tsconfig.json')
  gulp.src(['build/src/**/*.ts', 'build/src/**/*.js'])
  .pipe(tsimport(tsProject.compilerOptions))
  .on('error', function (error) {
    console.log('[Typescript] Server Error:', error.stack)
    this.emit('end')
  })
  .pipe(gulp.dest('dist/'))
  .on('end', () => {
    gulp.src('src/images/**/*')
    .pipe(gulp.dest('dist/images'))
    .on('end', done)
  })
})

package.json

{
  "scripts": {
    "android": "npm run build && concurrently -r 'npm run watch' 'react-native run-android'",
    "tsc": "tsc",
    "clean": "rimraf build && rimraf dist",
    "build": "npm run clean && npm run tsc:grep && gulp compile:source",
    "watch": "npm run build -- -w"
  }
}

replace-path.js

var fs = require('fs')
var path = require('path')

module.exports = function (code, filePath, importOptions) {
  var tscpaths = Object.keys(importOptions.paths)
  var lines = code.split('\n')

  return lines.map((line) => {
    var matches = []
    var requireMatches = line.match(/require\(('|")(.*)('|")\)/g)
    var importMatches = line.match(/import (.*)('|")(.*)('|")/g)

    Array.prototype.push.apply(matches, requireMatches)
    Array.prototype.push.apply(matches, importMatches)

    if (!matches || matches.length === 0) {
      return line
    }

    // Go through each require statement
    for (var match of matches) {
      // Find each paths
      for (var tscpath of tscpaths) {
        // Find required module & check if its path matching what is described in the paths config.
        var requiredModules = match.match(new RegExp(tscpath, 'g'))

        if (requiredModules && requiredModules.length > 0) {
          for (var requiredModule of requiredModules) {
            // Skip if it resolves to the node_modules folder
            var modulePath = path.resolve('./node_modules/' + tscpath)
            if (fs.existsSync(modulePath)) {
              continue
            }
            // Get relative path and replace
            var sourcePath = path.dirname(filePath)
            var targetPath = path.dirname(path.resolve(importOptions.outDir + '/' + importOptions.baseUrl + '/' + importOptions.paths[tscpath]))
            var relativePath = path.relative(sourcePath, targetPath)
            line = line.replace(new RegExp(tscpath, 'g'), './' + relativePath + '/')
          }
        }
      }
    }
    return line
  }).join('\n')
}

tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "moduleResolution": "classic",
        "jsx": "react-native",
        "outDir": "build",
        "rootDir": "src",
        "baseUrl": "./src",
        "paths": {
            "~components/*" : ["./components/*"],
            "~images/*" : ["./images/*"],
        }
    }
}

tsimport.js

var through = require('through2')
var replacePath = require('./replace-path.js')

module.exports = function (importOptions) {
  return through.obj(function (file, enc, cb) {
    if (!file.contents) {
      return
    }
    var code = file.contents.toString('utf8')
    code = replacePath(code, file.history.toString(), importOptions)
    file.contents = Buffer.from(code)
    this.push(file)
    cb()
  })
}