Combining Webpack and TypeScript to publish component libraries over npm — part 1

Combining Webpack and TypeScript to publish component libraries over npm — part 1

Introduction

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

Setting up TypeScript

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.

Setting up Webpack

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 solar-popup library

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:

Publishing over npm

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.

Consuming the library in another project

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.

The smart-terminal library

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:

Conclusion

Using the combination of TypeScript and webpack provides an excellent way to publish a typed library over npm.

• Use the tsconfig setting declarations:true` to generate d.ts files
• Use the library+libraryTarget webpack settings to produce a build suitable for consumption over npm.
• Publish and give your users the strongly type component to use.

Good luck in creating libraries!Please follow for more interesting articles!