Writing an Open Source JavaScript Library

Kent C. Dodds

Utah

1 wife, 3 kids

PayPal, Inc.

@kentcdodds

@kentcdodds

kcd.im/oss-workshop

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

Requirements

to run the workshop

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

Let's
Get
STARTED!

Setup

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

cd starwars-names

npm run setup:fem

open in your favorite editor

First things first

LICENSE, CoC, & README

Exercise

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

FEM/00-scratch...FEM/01.0-important

git checkout -f FEM/01.0-important

npm init

package.json

Exercise

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

FEM/01.0-important...FEM/02.0-npm-init

git checkout -f FEM/03.0-add-data

Create the lib

the easy part... 😉

Exercise

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

FEM/03.0-add-data...FEM/03.1-create-lib

git checkout -f FEM/03.1-create-lib

Linting

catch errors, encourage best practices, maintain consistency

Exercise

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

FEM/03.1-create-lib...FEM/04.0-linting

git checkout -f FEM/04.0-linting

Unit testing

with Mocha and Chai

Exercise

04.0-linting...FEM/05.0-setup-tests

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"

Exercise

  • Test .all
  • Test .random()

FEM/05.0-setup-tests...FEM/05.1-write-tests

git checkout -f FEM/05.1-write-tests

Exercise

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

FEM/05.1-write-tests...FEM/05.2-coverage

git checkout -f FEM/05.2-coverage

Saving yourself

from yourself

Exercise

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

FEM/05.2-coverage...FEM/06.0-validate

git checkout -f FEM/06.0-validate

Transpiling

never write without ES6 again...

Exercise

  • 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

FEM/06.0-validate...FEM/07.0-transpile-source

git checkout -f FEM/07.0-transpile-source

Exercise

  • 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 🎉 

FEM/07.0-transpile-source...FEM/07.1-transpile-tests

git checkout -f FEM/07.1-transpile-tests

Browser Build

Universal JavaScript!!

Exercise

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

FEM/07.1-transpile-tests...FEM/08.0-browser-build

git checkout -f FEM/08.0-browser-build

Time to fork

🍴 

Exercise

  • 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

FEM/08.0-browser-build...FEM/09.0-setup-travis

git checkout -f FEM/09.0-setup-travis

Exercise

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

FEM/09.0-setup-travis...FEM/09.1-report-coverage

git checkout -f FEM/09.1-report-coverage

Exercise

  • 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

FEM/09.1-report-coverage...FEM/09.2-auto-release

git checkout -f FEM/09.2-auto-release

Exercise

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

FEM/09.2-auto-release...FEM/09.3-commit-message

git checkout -f FEM/09.3-commit-message

Community

kcd.im/manage-oss

Let's talk...

Resources (my blog posts)

More Resources

Thank you!

@kentcdodds

kcd.im/oss-workshop
kcd.im/oss-workshop-feedback

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

  • 12,227

More from Kent C. Dodds