{"id":13760594,"url":"https://github.com/sarbbottam/write-an-open-source-js-lib","last_synced_at":"2026-01-24T02:33:56.462Z","repository":{"id":42520321,"uuid":"56937244","full_name":"sarbbottam/write-an-open-source-js-lib","owner":"sarbbottam","description":"Reference for How to Write an Open Source JavaScript Library - https://egghead.io/series/how-to-write-an-open-source-javascript-library","archived":false,"fork":false,"pushed_at":"2020-09-28T05:24:23.000Z","size":20,"stargazers_count":183,"open_issues_count":0,"forks_count":18,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-26T16:14:06.351Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sarbbottam.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-23T19:32:50.000Z","updated_at":"2024-09-10T18:46:27.000Z","dependencies_parsed_at":"2022-09-05T07:31:23.867Z","dependency_job_id":null,"html_url":"https://github.com/sarbbottam/write-an-open-source-js-lib","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarbbottam%2Fwrite-an-open-source-js-lib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarbbottam%2Fwrite-an-open-source-js-lib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarbbottam%2Fwrite-an-open-source-js-lib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sarbbottam%2Fwrite-an-open-source-js-lib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sarbbottam","download_url":"https://codeload.github.com/sarbbottam/write-an-open-source-js-lib/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239318840,"owners_count":19619479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T13:01:13.687Z","updated_at":"2025-11-01T19:30:23.744Z","avatar_url":"https://github.com/sarbbottam.png","language":null,"funding_links":[],"categories":["Podcasts","Worth Reading [🔝](#readme)","Worth Reading","Misc"],"sub_categories":["Other"],"readme":"Reference for [How to Write an Open Source JavaScript Library](https://egghead.io/series/how-to-write-an-open-source-javascript-library)\n---\n\nThe purpose of this document is to serve as a reference for:\n\n[How to Write an Open Source JavaScript Library](https://egghead.io/series/how-to-write-an-open-source-javascript-library) course by [Kent C. Dodds](https://github.com/kentcdodds)\n\nWatch the series at [egghead.io](https://egghead.io/series/how-to-write-an-open-source-javascript-library), if you haven't.\n\n---\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [Introduction to How to Write an Open Source JavaScript Library](#introduction-to-how-to-write-an-open-source-javascript-library)\n- [Setting up GitHub](#setting-up-github)\n- [Configuring npm and creating a package.json](#configuring-npm-and-creating-a-packagejson)\n- [Creating the library and adding dependencies](#creating-the-library-and-adding-dependencies)\n- [Pushing to GitHub](#pushing-to-github)\n- [Publishing to npm](#publishing-to-npm)\n- [Releasing a version to GitHub](#releasing-a-version-to-github)\n- [Releasing a new version to npm](#releasing-a-new-version-to-npm)\n- [Publishing a beta version](#publishing-a-beta-version)\n- [Setting up Unit Testing with Mocha and Chai](#setting-up-unit-testing-with-mocha-and-chai)\n- [Unit Testing with Mocha and Chai](#unit-testing-with-mocha-and-chai)\n- [Automating Releases with semantic-release](#automating-releases-with-semantic-release)\n- [Writing conventional commits with commitizen](#writing-conventional-commits-with-commitizen)\n- [Committing a new feature with commitizen](#committing-a-new-feature-with-commitizen)\n- [Automatically Releasing with TravisCI](#automatically-releasing-with-travisci)\n- [Automatically running tests before commits with ghooks](#automatically-running-tests-before-commits-with-ghooks)\n- [Adding code coverage recording with Istanbul](#adding-code-coverage-recording-with-istanbul)\n- [Adding code coverage checking](#adding-code-coverage-checking)\n- [Add code coverage reporting](#add-code-coverage-reporting)\n- [Adding badges to your README](#adding-badges-to-your-readme)\n- [Adding ES6 Support](#adding-es6-support)\n- [Adding ES6 Support to Tests using Mocha and Babel](#adding-es6-support-to-tests-using-mocha-and-babel)\n- [Limit Built Branches on Travis](#limit-built-branches-on-travis)\n- [Add a browser build to an npm module](#add-a-browser-build-to-an-npm-module)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n---\n\n## Introduction to How to Write an Open Source JavaScript Library\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-introduction)\n- micro libraries\n  - pros\n    - small enough to reason about the code\n    - easy to test as there is less code\n    - easy to reuse via `npm install`\n  - cons\n    - managing dependencies as there could be too many\n\n- objective of the course / learn to\n  - create a Git repository\n  - host it on GitHub\n  - create the library\n  - publish it to npm\n  - create a full test suite for it using\n    - karma\n    - mocha\n    - chai\n  - set up continuous integration\n  - add ES6 or ES2015 using Babel\n  - integrate webpack\n  - distribute this as both browser and node consumable\n\n## Setting up GitHub\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-setting-up-github)\n- create a GitHub account, if you don't have one\n- sign in to your account and create a new repository\n- follow the instructions displayed after creating the repository, to push your code to that repository\n- that's all! GitHub setup is complete\n\n## Configuring npm and creating a package.json\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-configuring-npm-and-creating-a-package-json)\n- install node if not already installed\n- configure npm locally to make publishing a little easier, for example\n  - `$ npm set init-author-name \"Sarbbottam Bandyopadhyay\"`\n  - `$ npm set init-author-url \"https://sarbbottam.github.io/\"`\n  - `$ npm set init-author-email \"sarbbottam@gmail.com\"`\n  - `$ npm set init-license \"MIT\"`\n- these will be used as defaults values during `npm init`\n- verify configuration\n  - `$ cat ~/.npmrc`\n- refer https://docs.npmjs.com/misc/config for more information\n- recommended setting\n  - `save-exact` property, it tells `npm` to use the exact version of the packages, rather than a version range, while saving dependency to package.json.\n  - it safeguards when semver is not followed properly or there's a mistake in a release.\n- create a npm account, if you don't have one at [npmjs.com](https://www.npmjs.com/)\n- `$ npm add-user`, to add your account\n  - enter username, password, and email when prompted\n- it will create your `auth token` and add it to `~/.npmrc`\n- `$ npm init` will prompt for desired information and create `package.json` at the end\n- `$ npm init --yes` will create a `package.json`, with the defaults, with out prompting\n\n## Creating the library and adding dependencies\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-creating-the-library-and-adding-dependencies)\n- create the `main` file\n- install required dependencies\n  - use `-S` or `--save` to save it as `dependency` at `package.json`\n  - use `-D` or `--save-dev` to save it as `devDependency` at `package.json`\n- create the functionality\n\n## Pushing to GitHub\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-pushing-to-github)\n- create a `.gitignore` at the `root` of the project, to list all the ignored files and directories\n- `$ git add \u003cfile-name\u003e` to stage the changes\n  - alternatively [`$ git add --all`](https://github.com/sarbbottam/conf-files/blob/master/git-confs/gitconfig#L20) to stage all the changes\n- `$ git commit` to commit the changes\n- `$ git push origin \u003crepo-name\u003e` to push the changes to GitHub(`origin`)\n  - `$ git remote -v` will display all the available `remote` and their corresponding `url`\n\n## Publishing to npm\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-publishing-to-npm)\n- `$ npm add-user`, if you have not already\n- add `package.json/files` to [whitelist the set of files to be published](https://docs.npmjs.com/files/package.json#files)\n- you can also add `.npmignore` file to ignore files/directories, that might fall under from whitelist\n- `$ npm version \u003cpatch|minor|major\u003e`, if you have already published to npm\n  - `patch` for bug fix\n  - `minor` for new feature\n  - `major` for breaking changes\n- [`npm pack`](https://docs.npmjs.com/cli/pack) or [`npm link`](https://docs.npmjs.com/cli/link) to validate the module to be publish\n- `$ npm publish`\n- verify the released package at `npm.im/\u003cpackage-name\u003e`\n\n## Releasing a version to GitHub\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-releasing-a-version-to-github)\n- add a version tag to git repository\n  - to associate the version released at npm to the corresponding code\n- `tag` in git, points to a specific commit\n- `$ git tag \u003cversion\u003e`\n  - `\u003cversion\u003e` released to npm\n- `$ git push --tags`\n  - GitHub will consider the tag as release and will make it available under `releases` tab\n- draft new release\n  - fill out the release form with the tag version\n\n## Releasing a new version to npm\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-releasing-a-new-version-to-npm)\n- make necessary updates\n- update the `package.json/version` `$ npm version \u003cpatch|minor|major\u003e`\n  - `patch` for bug fix\n  - `minor` for new feature\n  - `major` for breaking changes\n- `commit` the changes\n- `tag` the commit.\n- push changes to GitHub\n- push the tags to GitHub\n- `$ npm publish`\n\n## Publishing a beta version\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-publishing-a-beta-version)\n- make changes\n- manually update the package version in `package.json`\n  - add `-beta.0` to the end of the version\n- `$ git checkout -b \u003cbranch-name\u003e` for the beta version\n- `$ git tag \u003cpackge-version-beta.0\u003e`\n- `$ git push origin \u003cbranch-name\u003e`\n- `$ git push --tags`\n- `$ npm publish --tag beta`\n- verify published versions\n  - `$ npm info`\n\n## Setting up Unit Testing with Mocha and Chai\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-setting-up-unit-testing-with-mocha-and-chai)\n- `$ npm i -D mocha chai`, to install and add them to `devDependencies`\n- create a test file\n  - `require(chai)`\n  - `require` the file to be tested\n\n  ```js\n  var expect = require('chai').expect;\n  var functionality = required('./path/to/index.js');\n\n  describe('functionality', function() {\n    it('should validate the functionality', function() {\n      expect(true).to.be.true;\n    });\n  });\n  ```\n- update `package.json/script.test`\n  - `{\"scripts\": { \"test\": \"mocha path/to/test/file\" } }`\n  - add `-w` to watch for changes\n- `$ npm test` to run test\n\n## Unit Testing with Mocha and Chai\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-unit-testing-with-mocha-and-chai)\n- use the `global` `describe` function and `it` function to describe the tests and what they should do\n- validate functionalities by assertions using `expect`\n\n## Automating Releases with semantic-release\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-automating-releases-with-semantic-release)\n- `semantic-release` automates the releasing and frees you from redundant manual steps.\n- `$ npm i -g semantic-release-cli` to install `semantic-release-cli` globally\n- `$ semantic-release setup`\n  - it will take you through the interactive prompt\n  - it will create a `travis.yml` if the CI system chosen, is travis.\n  - it will update `package.json/script` w.r.t `release`\n  - it will remove the `version` from `package.json`\n    - as the version will be determined dynamically from the commit messages\n- this `script` will be executed on `success`\n- update `travis.yml` to run tests prior releasing\n- update the `package.json/version` to `0.0.0-sematically-released`, to avoid `npm` warning\n\n## Writing conventional commits with commitizen\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-writing-conventional-commits-with-commitizen)\n- commit message [convention](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#-git-commit-guidelines)\n- `$ npm i -D commitizen cz-conventional-changelog`\n  - install `commitizen` globally  or add `./node_modules/bin` to system `PATH` [to use `git cz` instead of `git commit`](https://github.com/commitizen/cz-cli#installing-the-command-line-tool)\n  - alternatively you could use `npm scripts`, `{\"scripts\": { \"commit\": \"git-cz\" } }`\n- [configure `commitizen`](https://github.com/commitizen/cz-cli#making-your-repo-commitizen-friendly) via `{config\": { \"commitizen\": { \"path\": \"cz-conventional-changelog\" } } }`\n\n## Committing a new feature with commitizen\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-committing-a-new-feature-with-commitizen)\n- make changes to `source` and `test`\n- use `commitizen` to commit with conventional message\n- push the changes to GitHub\n\n## Automatically Releasing with TravisCI\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-automatically-releasing-with-travisci)\n- travis build is automatically setup by semantic-release\n  - if for some reason it is not enabled, manually sync github repo and enable travis build at `https://travis-ci.org/profile/\u003cuser-name\u003e`\n- if the build is successful, travis will run `semantic-release`\n- depending on the commit messages, `semantic-release` would\n  - push a new version to npm\n  - push a new tag and release to github along with change history since the previous version\n\n## Automatically running tests before commits with ghooks\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-automatically-running-tests-before-commits-with-ghooks)\n- `$ npm i -D ghooks` to install and add it to `package.json/devDependencies`\n- configure `ghooks` via the `{\"config\": {\"ghooks\": { \"hook-name\": \"command-to-execute\" } } }`\n\n## Adding code coverage recording with Istanbul\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-adding-code-coverage-recording-with-istanbul)\n- `$ npm i istanbul`\n- update `package.json/script.test`\n  - `{\"scripts\": { \"test\": \"istanbul cover -x test-file-name-pattern _mocha -- path/to/test/file -R spec\" } }`\n- `$ npm test` will run the test and generate coverage information at `coverage/` folder\n- add `coverage` to `.gitignore` file\n\n## Adding code coverage checking\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-adding-code-coverage-checking)\n- create a script called `check-coverage` to verify coverage for statements, branches, functions, and lines.\n  - `{\"scripts\": { \"check-coverage\": \"istanbul check-coverage --statement 100 --branches 100 --function 100 --lines 100\" } }`\n- add `npm run check-coverage` to `travis/script`\n- you can also add it to `git hooks`\n  - `{\"config\": {\"ghooks\": { \"pre-commit\": \"npm test \u0026\u0026 npm run check-coverage\" } } }`\n\n## Add code coverage reporting\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-add-code-coverage-reporting)\n- signup for [codecov.io](https://codecov.io/)\n- `$ npm i codecov.io -D`\n- create a script called `report-coverage` to report coverage to [codecov.io](https://codecov.io/).\n  - `{\"scripts\": { \"report-coverage\": \"cat ./coverage/lcov.info | codecov\" } }`\n- add `npm run report-coverage` to `travis/after_success`\n- after successful build the reports will be pushed to [`codecov.io/github/\u003cuser-name/organization-name\u003e/\u003crepo-name\u003e`](https://codecov.io/)\n- check out [codecov browser extension](https://www.youtube.com/watch?v=d6wJKODB8_g\u0026feature=youtu.be)\n\n## Adding badges to your README\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-adding-badges-to-your-readme)\n- check out [shields.io](http://shields.io/)\n- add badges via `[![alt text](badge-url)](link to the service)`\n  - for example: `[![build](https://img.shields.io/travis/\u003cuser-name\u003e/\u003crepo-name\u003e.svg)](https://travis-ci.org/\u003cuser-name/organization-name\u003e/\u003crepo-name\u003e)`\n- you can also pass the `style` query param to customize the style of the badge\n  - `https://img.shields.io/...svg?style=flat-square`\n\n## Adding ES6 Support\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-adding-es6-support)\n- need a transpiler to write code with latest JavaScript specs\n- use [babel](http://babeljs.io/)\n- `$ npm i -D babel-cli` to install and add it to `package.json/devDependencies`\n- create a script called `build` to transpile ES6/ES2015 code to ES5\n  - `{\"scripts\": { \"build\": \"babel --out-dir dist src\" } }`\n  - you can use `-d` instead of `--out-dir`\n  - use `--copy-files` to copy dependencies\n    - `{\"scripts\": { \"build\": \"babel --copy-files --out-dir dist src\" } }`\n  - checkout [babel/setup/cli](http://babeljs.io/docs/setup/#cli) for further details\n- add a script called `prebuild` to clean the `dist` directory prior building\n  - `{\"scripts\": { \"prebuild\": \"rimraf dist\" } }`\n  - `$ npm i -D rimraf` to install and add it to `package.json/devDependencies`\n- install desired babel presets/plugin and add it to `package.json/devDependencies`\n  - `$ npm i -D babel-preset-es2015`\n  - `$ npm i -D babel-preset-stage-2`\n  - checkout [babel/pluglin](http://babeljs.io/docs/plugins/) for further details\n- create babel config\n  - either in a `.babelrc` file or in `package.json/babel`\n  - `.babelrc` - `$ echo '{ \"presets\": [\"es2015\", \"stage-2] }' \u003e .babelrc`\n  - `package.json` - `{ \"babel\" : { \"presets\": [\"es2015\", \"stage-2] } }`\n- `$ npm run build` will create the transpiled code in `dist` folder\n- update `package.json/main` to refer `dist`\n- add `npm run build` to `travis.yml/script`\n- add `dist/` to `.gitignore`\n\n## Adding ES6 Support to Tests using Mocha and Babel\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-adding-es6-support-to-tests-using-mocha-and-babel)\n- `npm i -D babel-register` to install and add it to `package.json/devDependencies`\n- pass `babel-rgister` as the compiler to `mocha` and update `package.json/scripts.test`\n  - `{\"scripts\": { \"test\": \"mocha path/to/test/file --compilers js:babel-register\" } }``\n- `$ npm i -d nyc` to install and add it to `package.json/devDependencies`\n- add a script called `cover`\n  - `{\"scripts\": { \"cover\": \"nyc npm test\" } }``\n- update `ghook` and `travis/script` run `npm run cover` instead of `npm test`\n- replace `istanbul` with `nyc` at `package.json/scripts.check-coverage`\n  - `{\"scripts\": { \"check-coverage\": \"nyc check-coverage --statement 100 --branches 100 --function 100 --lines 100\" } }`\n- add [`.nyc_output`](https://github.com/bcoe/nyc/issues/197) to `.gitignore`\n\n## Limit Built Branches on Travis\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-limit-built-branches-on-travis)\n- add `branches` to  `travis.yml`\n```yml\nbranches\n- only\n  - master\n```\n- `only` for whitelisting and `exclude` for blacklisting\n- `branch-name` (`master`) could also be a `regex`\n- travis will continue to build for pull requests\n\n## Add a browser build to an npm module\n\n[Direct link to the video tutorial](https://egghead.io/lessons/javascript-add-a-browser-build-to-an-npm-module)\n- `$ npm i -D webpack`\n- create `webpack.config.babel.js`\n  - for example, checkout [getting-started/#config-file](http://webpack.github.io/docs/tutorials/getting-started/#config-file)\n- add `libraryTarget: 'umd'` to `output`\n- add `library: \u003clibrary-name\u003e` to `output`\n- add `devtool: 'source-map'` to main config\n- install [`loaders`](https://webpack.github.io/docs/using-loaders.html)\n  - `$ npm i -D babel-loader`\n - rename the current `package.json/script.build` to `package.json/script.build:main`\n - add `\"build:umd\": \"webpack --output-filename \u003coutput-file-name\u003e.umd.js\"` to `package.json/script`\n - add `\"build:umd:min\": \"webpack --output-filename \u003coutput-file-name\u003e.umd.min.js\" -p` to `package.json/script`\n   - `-p` for production build, minify the code\n- `\"build\": \"build:main \u0026\u0026 build:umd \u0026\u0026 build:umd:min\"` to `package.json/script`\n- alternatively\n  - `$ npm i -D npm-run-all`\n  - `\"build\": \"npm-run-all build:*\"` to `package.json/script`\n- update `readme` to point to `https://unpkg.com/\u003cpackage-name\u003e@\u003cversion\u003e/path/to/umd/file`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarbbottam%2Fwrite-an-open-source-js-lib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsarbbottam%2Fwrite-an-open-source-js-lib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarbbottam%2Fwrite-an-open-source-js-lib/lists"}