Skip to content

Instantly share code, notes, and snippets.

@rochapablo rochapablo/README.md forked from azarus/gulptask.js
Last active Jun 14, 2018

Embed
What would you like to do?
Gulp Task to transform Typescript path imports into relative paths using the tsconfig

from this

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

to this

import Head from './../Commons/Head';
require('./../../images/test.jpg')
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)
})
})
{
"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"
}
}
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')
}
{
"compilerOptions": {
"target": "esnext",
"moduleResolution": "classic",
"jsx": "react-native",
"outDir": "build",
"rootDir": "src",
"baseUrl": "./src",
"paths": {
"~components/*" : ["./components/*"],
"~images/*" : ["./images/*"],
}
}
}
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()
})
}
@cdagli

This comment has been minimized.

Copy link

cdagli commented Jun 14, 2018

Double quotes?

var requireMatches = line.match(/require\(('|')(.*)('|')\)/g)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.