Vimeo, 2017-03-31
Laurie Voss
COO of Inc.
@seldo
The thing you use to build web apps
{
"name": "@seldo/some-package",
"version": "1.0.0",
...
"scripts": {
"test": "mocha ./test/*.js",
"start": "node ./index.js"
}
}
"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"prebuild": "npm run test && npm run build:clean",
"build:clean": "rimraf ./build/*",
"build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p",
"analyze": "node ./internals/scripts/analyze.js",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"pagespeed": "node ./internals/scripts/pagespeed.js",
"presetup": "npm i chalk",
"setup": "node ./internals/scripts/setup.js",
"clean": "shjs ./internals/scripts/clean.js",
"generate": "plop --plopfile internals/generators/index.js",
"lint": "npm run lint:js && npm run lint:css",
"lint:js": "eslint . --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:css": "stylelint ./app/**/*.css",
"lint:staged": "lint-staged",
"pretest": "npm run lint",
Don't read this code. Just remember "it was complicated."
npm run env
use
to get a list of the variables available
Dependencies are in $PATH for run scripts
publish: prepublish, publish, postpublish install: preinstall, install, postinstall uninstall: preuninstall, uninstall, postuninstall version: preversion, version, postversion test: pretest, test, posttest stop: prestop, stop, poststop start: prestart, start, poststart restart: prerestart, restart, postrestart
Git hooks as lifecycle events!
Why write bash when you can write more JavaScript?
The magic of npm accumulates over time
'use strict'
module.exports = doThing
function doThing() {
// things happen
}
https://github.com/webpack-contrib/awesome-webpack
module.exports = {
entry: './index.js',
output: {
filename: './dist/bundle.js'
}
}
webpack.config.js:
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^2.2.1"
}
package.json:
var foo = require('./lib/foo')
document.getElementById('bar').innerHTML = foo
module.exports = "Hello, world"
index.js:
lib/foo.js:
var path = require('path')
module.exports = {
entry: './index.js',
output: {
filename: './dist/bundle.js'
},
devServer: {
contentBase: [path.join(__dirname, "dist"), path.join(__dirname, "static")],
port: 9000
}
}
webpack.config.js:
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --open"
},
"devDependencies": {
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
package.json:
http://slides.com/dpogue/es6-intro
A really great sink, build your own kitchen
npm install --save lodash
npm install --save async
npm install --save jquery
npm is the official registry of jQuery plugins
npm install --save moment
npm.im/fecha
People keep trying to turn JavaScript into other languages
https://flow.org/
Why not just get somebody else to do it?
npm solves the same problem inside your company as it solved in the rest of the world.
npm ❤️ you