Tuesday, 9 October 2018

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.

1 comment:

micheal pan said...

BE SMART AND BECOME RICH IN LESS THAN 3DAYS....It all depends on how fast 
you can be to get the new PROGRAMMED blank ATM card that is capable of
hacking into any ATM machine,anywhere in the world. I got to know about 
this BLANK ATM CARD when I was searching for job online about a month 
ago..It has really changed my life for good and now I can say I'm rich and 
I can never be poor again. The least money I get in a day with it is about 
$50,000.(fifty thousand USD) Every now and then I keeping pumping money 
into my account. Though is illegal,there is no risk of being caught 
,because it has been programmed in such a way that it is not traceable,it 
also has a technique that makes it impossible for the CCTVs to detect 
you..For details on how to get yours today, email the hackers on : (
atmmachinehackers1@gmail.com ). Tell your 
loved once too, and start to live large. That's the simple testimony of how 
my life changed for good...Love you all ...the email address again is ;
atmmachinehackers1@gmail.com