browserify + tsify + babelify; babel gets ignored

Question

I want to browserify, tsify and babelify my code. Browserify and one of the other transpilers work, but together they dont. Babel just seems to get ignored (does not even read .babelrc).

I have the following gulp code:

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");
const babelify = require("babelify");

function build() {

  var b = browserify({
    basedir: '.',
    debug: true,
    cache: {},
    entries: ['src/index.ts'],
    packageCache: {}
  });

  return b
    .plugin(tsify)
    .transform(babelify)
    .bundle()
    .on("error", function (err) { console.log("Error: " + err.message); })
    .pipe(source('build.js'))
    .pipe(gulp.dest("build"));
 }

 gulp.task("build", build);

With this babelrc

{
   "presets": ["minify"]
}

And those dependencies

"@babel/core": "^7.2.2",
"babel-preset-minify": "^0.5.0",
"babelify": "^10.0.0",
"browserify": "^16.2.3",
"gulp": "^4.0.0",
"tsify": "^4.0.1",
"typescript": "^3.2.2",
"vinyl-source-stream": "^2.0.0"

As said even if I change the babelrc to something like the following I get no errors, it just doesnt minify the code.

Answer 1

Although I dont exactly know why the above code doesnt work, I found an alternative.

Use the setup provided here. Note that in order for it to work you will have to change the value of the module key in the tsconfig to be es5 (instead of es6). So that it looks like this:

{
    "compilerOptions": {
        "outDir": "build",
        "module": "es5",
        "moduleResolution": "node",
        "target": "es6"
    }
}