Combining Webpack and TypeScript to publish component libraries over npm — part 1
In this article: I will show you a seamless workflow to share your Typescript component library over npm. I will teach you time-saving techniques to avoid writing TypeScript definition files. Definition files give your users the benefits of IntelliSense.Also, I will inspire you to use Vanilla TypeScript. This keeps your library lightweight and cross framework compatible
We control the TypeScript compiler settings by a file called tsconfig.json. This can take any compiler options. To generate definition files, I used the “declaration”: true setting in my tsconfig. Here is an example of one of the generated definition files of one of my libraries:
I originally exported the solar-popup library via TypeScript using SystemJS modules. I done this by using the — module compiler option. You could then use the library in the browser by uning SystemJS, to load the exported modules. When I wanted to remove the SystemJS dependency, I realised that TSC doesn’t export a standalone file, I couldn’t import via a script tag. I had to use webpack to create the JavaScript file.These libraries also follow the Vanilla-TypeScript interfaces. Vanilla Typescript is the same as vanilla JavaScript, except I use TypeScript.
I use webpack configs like this to build my libraries. If you are not familiar with webpack, I recommend SurviveJs. It is an excellent book to use when first learning webpack. To get a standalone file you need to set library and libraryTarget in the webpack.config.js.
entry: {
"solar-popup": PATHS.src + '/SolarPopup.ts'
},
output: {
path: PATHS.build,
filename: '[name].js',
library: 'SolarPopup',
libraryTarget: 'umd'
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.ts$/,
loader: 'ts-loader'
},
{
test: /\.p?css$/,
loaders: [
'style-loader',
'css-loader?importLoaders=1,url=false',
'postcss-loader'
]
}
]
},I also recommend the excellent ts-loader to compile the typescript files.
The first library I designed in this way was my incarnation of a modal popup for use in a web application. It had to be as straightforward and lightweight as possible, while using CCS3 transitions, to give it a polished feel. I wrote it Vanilla TypeScript and to have minimal popup chrome.Finally, I wanted to have a modal background that also faded in using CSS transitions. Here is the popup in use in my website:
Video description:
To prepare this library for npm I simply ran `npm publish`, which published the project here.Note that I also have a prepublish script in my package.json, which creates a minified build via the `webpack -p` command.
I’m using this solar-popup library on my website, which I built using webpack. To install it, you run `npm install — save solar-popup`. Then to use it I do: `import SolarPopup from ‘solar-popup’` then use the solar-popup API as normal.
If I import this file into a TypeScript project, I will get all the IntelliSense from the definition files.
This libary uses a similar webpack setup and build settings to the solar-popup. Smart-terminal is published it here. It displays application messages events to the user. It works by expanding a div in the bottom right-hand-side of the window and closes after a short time.I also used it on my website:
Using the combination of TypeScript and webpack provides an excellent way to publish a typed library over npm.
declarations:true` to generate d.ts filesGood luck in creating libraries!Please follow for more interesting articles!