Publishing A Component Library

There are numerous strategies to publish and distribute your component library to be consumed by external projects. One of the benefits of Stencil is that is makes it easy to generate the various output targets that's right for your use-case.

Publishing to Node Package Manager (NPM)

The first step and highly recommended step is to publish the component library NPM. Npm is an online software registry for sharing libraries, tools, utilities, packages, etc. Once the library is published to NPM, other projects are able to add your component library as a dependency and use the components within their own projects.

package.json

The purpose of the package.json file is to give other tools instructions on how to find the package's files, and to provide information about the package. For example, bundlers such as Rollup and Webpack use this configuration to locate the project's entry files.

An advantage to using the compiler is it is able to provide help on how to best setup the project for distribution. Below is a common setup found within a project's package.json file:

{
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "es2015": "dist/esm/index.mjs",
  "es2017": "dist/esm/index.mjs",
  "types": "dist/types/interface.d.ts",
  "unpkg": "dist/ionic/ionic.js",
  "collection:main": "dist/collection/index.js",
  "collection": "dist/collection/collection-manifest.json",
  "files": [
    "dist/",
    "css/",
    "loader/"
  ]
}

The collection properties are used to allow lazy loading in other Stencil applications.

Note: If you are distributing both the dist and dist-custom-elements-bundle, then it's best to pick one of them as the main entry, that's up to you.