How to Write an Open Source JavaScript Library

90 minutes

Publishing a JavaScript library for public use requires some extra steps. You need to think about how people will use the library. From end users, to contributors your library now has a variety of people outside of yourself potentially making use of the code that you've released into the wild.

From Github and npm, to releasing beta versions, semantic versioning, code coverage, continuous integration, and providing your library with a solid set of unit tests, there are a ton of things to learn.

This series will guide you through a set of steps to publish a JavaScript open source library.

You might also enjoy this article about contributing to open source.

pro-course-rss-logo

PRO RSS Feed

Introduction to How to Write an Open Source JavaScript Library

Setting up GitHub

Configuring npm and creating a package.json

Creating the library and adding dependencies

Pushing to GitHub

Publishing to npm

Releasing a version to GitHub

Releasing a new version to npm

Publishing a beta version

Setting up Unit Testing with Mocha and Chai

Unit Testing with Mocha and Chai

Automating Releases with semantic-release

Writing conventional commits with commitizen

Committing a new feature with commitizen

Automatically Releasing with TravisCI

Automatically running tests before commits with ghooks

Adding code coverage recording with Istanbul

Adding code coverage checking

Add code coverage reporting

Adding badges to your README

Adding ES6 Support

Adding ES6 Support to Tests using Mocha and Babel

Limit Built Branches on Travis

Add a browser build to an npm module

js tutorial about Introduction to How to Write an Open Source JavaScript Library

Introduction to How to Write an Open Source JavaScript Library

1:35 js

This is an introduction to the "How to Write a JavaScript Library" in which the scope of the series is presented. You will learn everything you need to know to create a library for JavaScript: set up the GitHub repo, publish a module to npm, set up a test suite with code coverage reporting (using Karma, Mocha, and Chai), add continuous integration, add ES6 (ES2015) with Babel, configure Webpack, and distribute the library as a "Universal JavaScript" (a.k.a. "Isomorphic JavaScript") module (consumable by both the browser and node).

js tutorial about Setting up GitHub

Setting up GitHub

1:31 js

In this lesson, you'll learn how to set up a GitHub account, create a new GitHub repository, and connect your local project with that new repository so you have a place to store and collaborate on your library code.

js tutorial about Configuring npm and creating a package.json

Configuring npm and creating a package.json

5:01 js

In this lesson, you'll learn how to set up your machine to publish to npm so people can install your library. You'll configure some helpful defaults and use those to create a package.json file for your project using npm init.

js tutorial about Creating the library and adding dependencies

Creating the library and adding dependencies

4:46 js

Don't reinvent the wheel. We're creating a great library here, but we don't have to write every line of code. Learn how to depend on other libraries while creating your own in this lesson.

js tutorial about Pushing to GitHub

Pushing to GitHub

2:34 js

Once you've written some code and you feel good about it, it's time to commit that code and push it up to your GitHub repository for storage and collaboration.

js tutorial about Publishing to npm

Publishing to npm

2:36 js

Putting your code up on GitHub is helpful, but publishing your library to npm makes it even easier for people to use your library. In this lesson, you'll learn how to publish your library and validate that it published correctly.

js tutorial about Releasing a version to GitHub

Releasing a version to GitHub

2:27 js

Now that you've released your module to npm, it's time to learn how to associate that release with a particular commit on GitHub. In this lesson learn how to create a tag using git tag and then how to associate that with a release on GitHub.

js tutorial about Releasing a new version to npm

Releasing a new version to npm

3:24 js

When you want to add a new feature, fix a bug, or push out a breaking API change, you need to take Semantic Versioning into account. In this lesson, learn what each number means as well as how to push out a new version of your library.

js tutorial about Publishing a beta version

Publishing a beta version

3:37 js

Sometimes you're not quite ready to release a full on version of your open source library to npm. In this lesson, learn how to publish a beta version so people can try it out without tampering with anyone else using your library.

js tutorial about Setting up Unit Testing with Mocha and Chai

Setting up Unit Testing with Mocha and Chai

2:44 js

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

js tutorial about Unit Testing with Mocha and Chai

Unit Testing with Mocha and Chai

3:01 js

Now that you've got everything set up with mocha and chai, it's time to actually write tests. In this lesson you'll learn how to use describe and it to outline your tests and make sure you don't break your library in the future.

js tutorial about Automating Releases with semantic-release

Automating Releases with semantic-release

5:49 js

There are so many repeated steps when releasing a new version of a library. The tool semantic-release automates this process by pushing off the responsibility of your releases to continuous integration. Trust us, this will change your workflow for the better.

js tutorial about Writing conventional commits with commitizen

Writing conventional commits with commitizen

4:47 js

Because semantic-release requires a specific message format, it's easier to follow this convention using a tool called commitizen. In this lesson, we'll use it to write our first conventional commit message.

js tutorial about Committing a new feature with commitizen

Committing a new feature with commitizen

3:49 js

In this lesson, we'll add a new feature to our library and use commitizen to generate our commit message that follows the convention for semantic-release to know it needs to bump the minor version.

js tutorial about Automatically Releasing with TravisCI

Automatically Releasing with TravisCI

3:52 js

Now that we have everything set up with semantic-release and we have a feature commit, let's push that up and watch TravisCI use semantic-release do our library release automatically.

js tutorial about Automatically running tests before commits with ghooks

Automatically running tests before commits with ghooks

3:02 js

Wouldn't it be nice if everyone ran the tests before committing code? With ghooks, you can automatically add a githook when dependencies are installed which will allow you to define common scripts to be run at various points during git actions (like committing). In this lesson, we'll add a githook for running the tests before we commit code to make sure we don't commit anything that breaks the tests.

js tutorial about Adding code coverage recording with Istanbul

Adding code coverage recording with Istanbul

2:57 js

This lesson will utilize the Istanbul tool to instrument our code for code coverage recording and reporting. We'll use this to make sure that as our library gets new features, we keep track of our coverage and can find places to improve it.

js tutorial about Adding code coverage checking

Adding code coverage checking

3:24 js

Now that we have code coverage being reported, let's make sure that nobody commits code which drops code coverage below our standard by adding a check-coverage script that utilizes istanbul's built-in check-coverage command.

js tutorial about Add code coverage reporting

Add code coverage reporting

3:59 js

Now that we're keeping track of our coverage, let's upload our reports to a third party service so we can track our stats over time. In this lesson we'll show how easy it is to upload our stats to codecov.io.

js tutorial about Adding badges to your README

Adding badges to your README

2:28 js

It's nice to know the status of a project. Adding badges to your readme gives first-timers and old-timers an at-a-glance peek into the status of your project. In this lesson, we'll add several badges using shields.io

js tutorial about Adding ES6 Support

Adding ES6 Support

8:35 js

Writing the code in the next version of JavaScript can really simplify the development of a library. In this lesson, learn how to create a build which uses the BabelJS transpiler to enable you to write your code using ES6 (aka ES2015) syntax.

js tutorial about Adding ES6 Support to Tests using Mocha and Babel

Adding ES6 Support to Tests using Mocha and Babel

5:02 js

By adding ES6 support to our source code, we need to add that same support to our tests so we can consume that synatx. This is quite easy with the --compilers flag for Mocha.

js tutorial about Limit Built Branches on Travis

Limit Built Branches on Travis

3:38 js

By default, Travis will build all branches, tags, and Pull Requests. Because we're building our master branch before we release, we don't need Travis building our releases. Also, we don't care to have Travis build all the branches. So we're going to limit Travis to only build our master branch and Pull Requests by configuring travis via our .travis.yml file.

js tutorial about Add a browser build to an npm module

Add a browser build to an npm module

6:16 js

Currently, our library is being distributed as a CommonJS module, but we should support the browser as well. In this lesson, we're going to use webpack to create a UMD (Universal Module Definition) build of our module so users can consume it in a browser.

Presented by:

Kent C. Dodds

a JavaScript developer who likes open source and teaching.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?