There are two values in caps to replace in the example above. Once you have created the file, edit it to include the following information: If you're not familiar with script in a package.json file, these are simply shorthand commands you can run by name with npm run įor more information about this configuration file read this. This will run the rollup package with the -c flag which means "use the rollup configuration file". "scripts" - We have defined a new script called rollup."types" - We have defined the location for our library's types."files" - We have defined the output directory for our entire library."module" - We have defined the output path for es6 modules."main" - We have defined the output path for commonjs modules.The most important changes are as follows: Obviously your author name can be different, and the specific version of each of your libraries might be different as well. Here is the sample of the package.json file we are using for this tutorial. So with that said, let's go ahead and install rollup and our plugins: Many people in the comments have graciously taken the time to add corrections, I would highly recommend you read this comment in particular to educate yourself about the errors and changes you may encounter. d.ts filesĪs time passes, some of these tools have been updated and the exact instructions as written below no longer work. - Converts commonjs modules to ES6 modules.- Teaches rollup how to process Typescript files.- Uses the node resolution algorithm for modules.We are going to rely on four plugins for the initial configuration of our library (more will be added later): By design rollup does not know how to do everything, it relies on plugins installed individually to add the functionality that you need. That's why we've chosen rollup.Īlso similar to webpack, rollup uses a plugin ecosystem. Though both tools can accomplish the same goal depending on configuration, typically webpack is used for bundling applications while rollup is particularly suited for bundling libraries (like ours). If you've never used rollup before, it's very similar to webpack in that it is a tool for bundling individual Javascript modules into a single source that a browser is better able to understand. One you add those values to your TS configuration file you should see the errors in Button.tsx and other files immediately disappear.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |