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:
and C:\dev\github\demo-typescript-rollup\rollup.config.js:
...running Rollup would report an error like:
We need to install rollup-plugin-typescript (among other packages):
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:
If we run Rollup now, it will use typescript plugin to transpile TS code to JS which will be successfully bundled:
To see the entire project on GitHub, go here.
https://medium.com/@paleo.said/how-to-bundle-an-npm-package-with-typescript-and-rollup-f80e0f196189
Try using https://www.npmjs.com/package/rollup-plugin-typescript2.
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!");
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'
}
}];
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)
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
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()
]
}];
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
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-typescripthttps://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:
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
Post a Comment