gulp-typescript icon indicating copy to clipboard operation
gulp-typescript copied to clipboard

If `extends` is used and `outDir` is missing in TypeScript configuration which extends a base configuration, path names are lowercased

Open timkraut opened this issue 8 years ago • 0 comments

Hi,

I'm trying to compile TypeScript files and pipe them into gulp-rollup. After almost an entire day of debugging, I think I've found a rarely occurring bug in gulp-typescript:

Expected behavior: If outDir is only used in a TypeScript configuration file which serves as the base for another one (i.e. it extends the base one), the outputted path names should not be lowercased.

Actual behavior: They are lowercased which causes gulp-rollup to report "/Users/timkraut/Development/test-case-gulp-typescript/bundles/index.js" does not exist in the hypothetical file system!

Your gulpfile:

const gulp = require('gulp')
const typeScript = require('gulp-typescript')
const rename = require('gulp-rename');
const rollup = require('gulp-rollup');

function compileTypeScript() {
  const typeScriptProject = typeScript.createProject('tsconfig.extending.json')

  const typeScriptResult = gulp
    .src('src/**/*.ts')
    .pipe(typeScriptProject())

  typeScriptResult.dts.pipe(gulp.dest('bundles/'))
  typeScriptResult.js.pipe(gulp.dest('bundles/'))

  return typeScriptResult.js
}

const rollupConfig = {
  entry: './bundles/index.js',
  format: 'umd',
  sourceMap: true,
}

export function bundleJavaScript() {
  const compiledJsFiles = compileTypeScript(false)

  return compiledJsFiles
    .pipe(rollup(rollupConfig))
    .pipe(rename('bundle.umd.js'))
    .pipe(gulp.dest('bundles/'))
}

gulp.task(bundleJavaScript)

tsconfig.base.json

{
  "compilerOptions": {
    "alwaysStrict": true,
    "declaration": true,
    "forceConsistentCasingInFileNames": true,
    "module": "es2015",
    "outDir": "bundles/",
    "preserveConstEnums": true,
    "pretty": true,
    "removeComments": false,
    "rootDir": "src/",
    "target": "ES2015",
    "lib": [
      "DOM",
      "ES6",
      "DOM.Iterable",
      "ScriptHost",
      "ES2015.Collection"
    ],
    "allowUnreachableCode": true,
    "allowUnusedLabels": true,
    "listEmittedFiles": false,
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "noImplicitThis": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "sourceMap": true,
    "strictNullChecks": false
  },
  "exclude": [
    "node_modules/",
    "bundles/"
  ],
  "include": [
    "src/"
  ]
}

The only important line here is "outDir": "bundles/".

tsconfig.extending.json

{
  "extends": "./tsconfig.base",
  "compilerOptions": {
    "outDir": "bundles/"
  }
}

If "outDir": "bundles/" is removed from tsconfig.extending.json, I get the error that gulp-rollup can't find the file. I don't know how I can easily show you that the issue for this error is that the path name is lowercased. I've found it while stepping manually through the code of gulp-rollup. I've created a repo which illustrates the issue: https://github.com/timkraut/test-case-gulp-typescript. I hope that helps! Let me know if there is anything I can do to help you fix this. Thanks in advance!

timkraut avatar Aug 03 '17 14:08 timkraut