Introduction
In the last article I described the basics of making a TypeScript component library.To get you started quicker in creating your own components, I have now created a boilerplate project using best practices that you can adjust to your needs. It contains virtually the same build and project structure as my other components, except it is simplified. It uses a very basic webpack.config.js and uses TypeScript.This article can be read along with my YouTube video while eating a croissant and drinking some cappuccino.
After you clone the boilerplate project you will want to tailor this project. I recommend you do find a find-and-replace on two items.1 “typescript-component” into “<component name>”:
2 “TypeScriptComponent” into “<camel-case name>”:
note: originally my component was named “MyComponent”Once you do this then you will just need to manually change the name of the two files TypeScriptComponent.js and TypeScriptComponent.cssOf course, you can name the above any way you like. The boilerplate component simple renders a button that responds to an event. Simple but its somewhere you can start:
The first thing you need to do is run `npm i` in both the root and /demo folder. If you want immediate changes to the component to be available in the /demo project you can link to the root folder by running sh demo/link.sh. This way, you don’t have to publish the component to npm to then test it locally in the demo project.After running sh link.sh the node modules folder points via a symlink to the parent:
If you run `webpack -watch -watch-poll` in root and /demo, you will have compiling running for both of them. It’s a great workflow when making changes.The demo loads the component on the page and displays it:
You can still publish to npm at any time by running sh publish.sh in root.
I also include a deploy.sh in root so that you can run the demo on github. It creates an orphan branch with just one git commit, keeping your git log clean.
Well, that’s it! You have an easy way to get started with TypeScript and webpack, to create components. You can share across the world! At the time of writing, I have around ten projects on open source using these techniques. Most of them are also published on npm.You also get the benefits of strong typing out of the box, as well as your users that download your project over npm. Your d.ts definitions ship automatically on webpack compilation and publishing. You don’t have to worry about sending your definitions to definitely typed.Stay tuned for more!
