tsify - Only read browserify files

Question

I am using tsify to build my TypeScript files. However, currently it seems tsify is reading all of the TypeScript files in my source instead of just the files included in my main TypeScript file (and subsequently imported files). How do I limit tsify to just the files given to browserify?

Gulp task:

gulp.task("build", function()
{
  return browserify({})
    .add("index.ts")
    .plugin(tsify)
    .transform("babelify", {
      "presets" : ["es2015", "stage-0"]
    })
    .bundle()
    .pipe(source("index.js"))
    .pipe(gulp.dest("www"));
});

And tsconfig.json:

{
  "compileOnSave": true,
  "compilerOptions": {
    "lib": [
      "dom",
      "es2015",
      "es2016",
      "es2017"
    ],
    "noImplicitAny": true,
    "strictNullChecks": true,
    "target": "es2015"
  },
  "exclude": [
    "node_modules"
  ]
}

Answer 1

To have tsify include only the files sourced from Browserify in the compilation, you should specify an empty files array in the tsconfig.json file.

{
  "compileOnSave": true,
  "compilerOptions": {
    "lib": [
      "dom",
      "es2015",
      "es2016",
      "es2017"
    ],
    "noImplicitAny": true,
    "strictNullChecks": true,
    "target": "es2015"
  },
  "files": []
}

tsify will then include only the Browserify entry point files and their dependencies in the compilation.

If you are using other tools with your tsconfig.json, this can cause problems, as they won't know which files are involved in the compilation. If that's the case, you can either include the entry point files in the tsconfig.json, too, or can use a separate, differently named configuration file - e.g. tsconfig-tsify.json - for tsify. (You can specify a configuration file using tsify's project option.)