Using Rollup.js to bundle TypeScript modules

I wrote earlier about how to use Rollup.js to bundle modules written in JavaScript but what if source files are written in TypeScript? Rollup itself can't do transpiling so we have to instruct it to use a Typescript transpiler (typescript package).

If we have TS source file C:\dev\github\demo-typescript-rollup\src\index.ts:

function foo(s: string) {
    console.log(s);
};

foo("Hello, world!"); 

and C:\dev\github\demo-typescript-rollup\rollup.config.js:

export default [{
    input: 'src/index.ts',
    output: {
        file: 'dist/bundle.js',
        format: 'cjs'
    }
}];

...running Rollup would report an error like:

C:\dev\github\demo-typescript-rollup>npx rollup -c

src/index.ts → dist/bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src\index.ts (1:14)
1: function foo(s: string) {};
                 ^
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (C:\dev\github\demo-typescript-rollup\node_modules\rollup\dist\rollup.js:3460:30)
    at Module.error (C:\dev\github\demo-typescript-rollup\node_modules\rollup\dist\rollup.js:13371:9)
    at tryParse (C:\dev\github\demo-typescript-rollup\node_modules\rollup\dist\rollup.js:13029:16)
    at Module.setSource (C:\dev\github\demo-typescript-rollup\node_modules\rollup\dist\rollup.js:13102:33)
    at C:\dev\github\demo-typescript-rollup\node_modules\rollup\dist\rollup.js:21768:20
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
    at findNodeScript.then.existing (C:\Users\komazec\AppData\Roaming\npm\node_modules\npm\node_modules\libnpx\index.js:268:14)

We need to install rollup-plugin-typescript (among other packages):

C:\dev\github\demo-typescript-rollup>npm install --save-dev typescript rollup rollup-plugin-typescript tslib
npm notice created a lockfile as package-lock.json. You should commit this file.
+ tslib@1.9.3
+ rollup@0.66.5
+ typescript@3.1.1
+ rollup-plugin-typescript@1.0.0
added 48 packages from 70 contributors in 13.156s

If we don't install tslib and try to run Rollup we'll get an error like:

$ npx rollup -c
[!] Error: Cannot find module 'tslib/tslib.es6.js' from '/home/bojan/my_app/node_modules/rollup-plugin-typescript/dist'

This is because tslib is a peer dependency of rollup-plugin-typescript:

$ npm list
...
├─┬ rollup-plugin-typescript@1.0.1
...
├── UNMET PEER DEPENDENCY tslib@*
...


Let's now modify config file so it adds typescript plugin into the Rollup processing chain:

import typescript from 'rollup-plugin-typescript';

export default [{
    input: 'src/index.ts',
    output: {
        file: 'dist/bundle.js',
        format: 'cjs'
    },
    plugins: [
        typescript()
      ]
}];

If we run Rollup now, it will use typescript plugin to transpile TS code to JS which will be successfully bundled:

C:\dev\github\demo-typescript-rollup>npx rollup -c

src/index.ts → dist/bundle.js...
created dist/bundle.js in 71ms

To see the entire project on GitHub, go here.

References:

https://github.com/rollup/rollup-plugin-typescript
https://medium.com/@paleo.said/how-to-bundle-an-npm-package-with-typescript-and-rollup-f80e0f196189

TODO:

Try using https://www.npmjs.com/package/rollup-plugin-typescript2.