babel 7 not transpiling when used in rollup with typescript plugin

Question

I Cannot seem to get rollup-plugin-babel to work in my typescript project. The .ts code compiles and rollup packages, map files are generated but babel does not transpile it.

Also if I run npx babel lab.js --out-file lab-es5.js babel seem to work just fine.

This my rollup.config.js

import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2'
import sourcemaps from 'rollup-plugin-sourcemaps';
import babel from 'rollup-plugin-babel';

var plugins = [
    nodeResolve({
        module: true,
        jsnext: true,
        main: true,
        preferBuiltins: false
    }),
    commonjs({
        include: 'node_modules/**',  // Default: undefined
        ignoreGlobal: false,  // Default: false
    }),
    typescript(/*{ plugin options }*/),
    babel({
        exclude: 'node_modules/**',
        runtimeHelpers: true
    }),
    sourcemaps()
];

export default [
    {
        input: 'src/lab.ts',
        plugins,
        output: {
            name: "TablePager",
            file: 'lab.js',
            format: 'iife',
            sourcemap: true
        }
    }
];

and this is my .babelrc

{
    "presets": ["@babel/preset-env"]
}

If you have any clues as to what I am doing wrong I am greatful.

Answer 1

Explanations

By default, @rollup/plugin-babel have the following extensions enabled:

.js
.jsx
.es6
.es
.mjs

And so, there are two things important to set when using @rollup/plugin-babel along with @rollup/plugin-typescript .

1. You have to tell it to use the TypeScript extension (which is not enabled by default).
2. You have to tell it which files you want to transpile.

For some reasons, the documentation says that by default, all files are transpiled. Which is not the case for files having the TypeScript extension. So you have to set the include option manually.

Fortunately for the second option, you can tell it to use a glob pattern. Setting a folder won't work.

Example

Here is an example. In this context, all TypeScript files to transpile are in the src folder.

"use strict";

import babel from "@rollup/plugin-babel";
import typescript from "@rollup/plugin-typescript";

import { resolve } from "path";

export default {
    plugins: [
        typescript(),
        babel({
            extensions: [".ts"],
            include: resolve("src", "**", "*.ts")
        })
    ];
};

Links

• Rollup documentation .
• Babel plugin for Rollup documentation .
• TypeScript plugin for Rollup documentation .

Answer 2

Your .babelrc is missing @babel/preset-typescript . Try installing the package and adding it to the configuration:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ]
}

Answer 3

Checkout Microsoft's TypeScript-Babel-Starter and the rollup section.

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import pkg from './package.json';

const extensions = [
  '.js', '.jsx', '.ts', '.tsx',
];

const name = 'RollupTypeScriptBabel';

export default {
  input: './src/index.ts',

  // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
  // https://rollupjs.org/guide/en#external-e-external
  external: [],

  plugins: [
    // Allows node_modules resolution
    resolve({ extensions }),

    // Allow bundling cjs modules. Rollup doesn't understand cjs
    commonjs(),

    // Compile TypeScript/JavaScript files
    babel({ extensions, include: ['src/**/*'] }),
  ],

  output: [{
    file: pkg.main,
    format: 'cjs',
  }, {
    file: pkg.module,
    format: 'es',
  }, {
    file: pkg.browser,
    format: 'iife',
    name,

    // https://rollupjs.org/guide/en#output-globals-g-globals
    globals: {},
  }],
};

.babelrc

{
  "presets": [
    "@babel/env",
    "@babel/typescript"
  ],
  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread"
  ]
}