node.jsbrowserifybabeljstsify

babelify transform not running

I'm having trouble getting babelify to run on my code.

I've got two typescript files:

script1.ts

import Greeter from './script2';

const greeter = new Greeter('Hello, world!');

document.body.innerHTML = greeter.greet();

script2.ts

class Greeter {
    greeting: string;

    constructor(msg: string) {
        this.greeting = msg;
    }

    greet() {
        return `<h1>${this.greeting}</h1>`;
    }
}

export default Greeter;

.babelrc

{
  "presets": [
      "airbnb"
  ]
}

and i'm trying to run browserify with tsify and babelify:

browserify ./script1.ts -o ./app.js -p tsify -t babelify

the files get compiled and packaged, but it never runs babelify over the code, I end up with output that still has classes and template strings in it.

if I run babel separately, it works as expected:

browserify ./script1.ts -o ./app.js -p tsify
babel ./app.js --out-file ./app-babel.js

what step am I missing here?

Solution

  • The problem is that babel by default will only operate on .JS and .JSX files. unfortunately there is currently no way to configure this from a .babelrc config file (https://github.com/babel/babel/issues/3741).

    So this must be configured from the command line:

    browserify ./script1.ts -o ./app.js -p tsify -t [ babelify --extensions ".ts",".tsx",".js",".jsx" ]

    or from code:

    browserify({ entries: files })
  .plugin(tsify)
  .transform(babelify, {
    extensions: [
      '.ts', '.tsx', '.js', '.jsx'
    ]
  });

    Note that babel will still auto load any .babelrc content when specifying this extensions list.