Writing an Open Source JavaScript Library

Kent C. Dodds


1 wife, 3 kids

PayPal, Inc.


Please Stand...

What this workshop is

  • From scratch
  • Create a micro-library
  • Write and run tests
  • Transpiling
  • Continuous Integration
  • Publish a real project (each of you!)
  • Community management

What this workshop is not

  • Focused on building a library


to run the workshop

  1. git
  2. node (version 6)
  3. npm (version 3)
  4. travis-ci.org account
  5. codecov.io account



git clone https://github.com/kentcdodds/starwars-names.git

cd starwars-names

npm run setup:fem

open in your favorite editor

First things first



  • Create CODE_OF_CONDUCT.md
  • Create LICENSE
  • Create README.md

git checkout -f FEM/01.0-important

npm init



  • npm set init-{property}
    • author-name
    • author-email
    • author-url
    • license
  • npm init

git checkout -f FEM/03.0-add-data

Create the lib

the easy part... 😉


  • Create src/index.js
  • npm install unique-random-array
  • Add node_modules to .gitignore

git checkout -f FEM/03.1-create-lib


catch errors, encourage best practices, maintain consistency


  • npm i -D eslint eslint-config-kentcdodds
  • Configure eslint
  • Add lint script

git checkout -f FEM/04.0-linting

Unit testing

with Mocha and Chai


git checkout -f FEM/05.0-setup-tests

  • npm install --save-dev mocha chai
  • Create src/index.test.js
  • Create test/mocha.opts
  • Update package scripts "test" and "watch:test"


  • Test .all
  • Test .random()

git checkout -f FEM/05.1-write-tests


  • npm install --save-dev nyc
  • Configure nyc in package.json
  • Add cover script
  • update .gitignore

git checkout -f FEM/05.2-coverage

Saving yourself

from yourself


  • npm i -D ghooks npm-run-all
  • Add validate script
  • Configure ghooks

git checkout -f FEM/06.0-validate


never write without ES6 again...


  • npm i -D babel babel-preset-es2015 rimraf
  • Configure babel
  • Add build script
  • Add prebuild script
  • Add files array to package.json
  • Add dist to .gitignore
  • Use ES6 in src/index.js

git checkout -f FEM/07.0-transpile-source


  • npm i -D babel-plugin-istanbul babel-register cross-env
  • Add cross-env to cover script
  • Update nyc config
  • Update babel config
  • Use ES6 in tests 🎉 

git checkout -f FEM/07.1-transpile-tests

Browser Build

Universal JavaScript!!


  • npm i -D webpack babel-loader json-loader
  • Add webpack.config.babel.js
  • Update build script and add more

git checkout -f FEM/08.0-browser-build

Time to fork



  • Fork GitHub Repo
  • Rename Fork
  • Add to travis-ci.org
  • Update remote: git remote set-url origin https://github.com/user/repo.git
  • Create Travis.yml
  • Rename package in package.json
  • Update starwars-names.json kcd.im/fem-names
  • git commit
  • git push

git checkout -f FEM/09.0-setup-travis


  • npm i -D codecov
  • Add report-coverage script
  • Update .travis.yml
  • git commit
  • git push

git checkout -f FEM/09.1-report-coverage


  • npm install --global semantic-release-cli
  • semantic-release-cli setup
  • git checkout package.json .travis.yml
  • Update version, add release script
  • git commit -am 'feat(lib): Release the lib'
  • git push

git checkout -f FEM/09.2-auto-release


  • npm install -D commitizen cz-conventional-changelog validate-commit-msg
  • Add commitizen to config in package.json
  • Add validate-commit-msg to ghooks config

git checkout -f FEM/09.3-commit-message


Let's talk...

Resources (my blog posts)

More Resources

Thank you!

Writing an Open Source JavaScript Library

By Kent C. Dodds

Writing an Open Source JavaScript Library

We’ll get started by giving an overview of what we’re going to build, then we’ll get our blank slate going with a package.json. We’ll talk about the significance of this file and the various properties we’ll use to help us with the distribution and management of our module and its dependencies. Then we’ll add the tooling needed for testing our library and adding code coverage. This is something that’s really important to get working early on in the project, so we’ll get it done early. Then we’ll jump into setting up the tooling for transpiling our source code from ESNext to ES5 so we distribute code that can be consumed by people delivering to older environments (like old Node or browsers). Then we’ll add the tooling we need to distribute a browser version of our library so people can consume our library in the context of a browser (without having to bundle it themselves). As contributions to our library grows, it’ll be important to be able to check that the contribution passes our unit tests automatically without having to pull down every pull request to test it locally. So we’re going to add continuous integration with TravisCI to automatically run our tests and report the code coverage reports to codecov.io With this infrastructure set up, we’ll then add semantic-release to automate releases of our library. This will help us reduce a great amount of human erro

  • 11,482