Publishing npm Modules

What's the point of this talk?

• Encourage you to publish your own modules

• Learn the mechanics of publishing & maintaining

Why publish to npm?

• Support open-source

• Personal re-use

• Share with others

Getting Started

• Come up with an idea 💡

• Research similar projects

• Design your public API

Setup, Tooling, & Workflow

• Initialize git and npm

• Dependency management and .npmignore

• Use Babel to compile ES2015 (and JSX)

• Add linting and testing

• Add helpful documentation

Setup git and npm

// set up git
$ git init
$ git remote add origin <github-repo-url>

// set up npm
$ npm set init.author.name "Your Name"
$ npm set init.author.email "you@example.com"
$ npm set init.author.url "http://yourblog.com"

$ npm adduser

$npm init
...
main: build/index.js

Add Dependencies

TYPES

• dependencies

• devDependencies

• peerDependencies

• optionalDependencies

• bundledDependencies

* See a more detailed description here

Example package.json

  // package.json
  
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.21.0",
    "babel-eslint": "^7.1.1",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "enzyme": "^2.7.0",
    "eslint": "^3.13.1",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^3.0.2",
    "eslint-plugin-react": "^6.9.0",
    "eslint-watch": "^2.1.14",
    "expect": "^1.20.2",
    "ignore-styles": "^5.0.1",
    "jsdom": "^9.9.1",
    "jsdom-global": "^2.1.1",
    "mocha": "^3.2.0",
    "react": "^15.4.1",
    "react-addons-test-utils": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "dependencies": {
    "radium": "^0.18.1"
  }

Example File Structure


├─lib
|  ├─index.js
|  └─components
|     └─Example.js
├─test
   ├─components
├─.babelrc
├─.eslintrc.js
├─.gitignore
├─.npmignore
├─README.md
├─package.json
├─yarn.lock

.npmignore & .gitignore

// .gitignore

*.DS_Store
build
node_modules
*.log

// .npmignore

*.DS_Store
lib
.babelrc
test
*.log

Use Babel

// .babelrc
{
  "presets": ["es2015", "react"]
}

// .package.json
 ...
 "main": "build/index.js",
  "scripts": {
    "prepublish": "npm run lint && npm test && npm run build",
    "build": "babel lib -d build",
 ...

 "devDependencies": {
   "babel-cli": "^6.18.0",
   "babel-core": "^6.21.0",
   "babel-eslint": "^7.1.1",
   "babel-preset-es2015": "^6.18.0",
   "babel-preset-react": "^6.16.0",
...

Add Linting and Testing


// .package.json

...

"main": "build/index.js",
"scripts": {
  "prepublish": "npm run lint && npm test && npm run build",
  "build": "babel lib -d build",
  "lint": "eslint lib/**; exit 0",
  "lint:watch": "esw -w lib/**",
  "test": "mocha --compilers js:babel-core/register ./test/**/*.spec.js --require ignore-styles",
  "test:watch": "npm test -- --watch"
},

...