reveal.js

npm Frontend Boilerplate

Por Joan León y David Garcia

Schibsted Spain

Instalación del entorno

Node Version Manager


							curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

NVM Repo

Node Version Manager

Listar versiones remotas de Node


							$ > nvm ls-remote

Node Version Manager

Instalar versión específica de Node


							$ > nvm install v6.0.0
							Las versiones pares son las LTS

Node Version Manager

Listar versiones instaladas


							$ > nvm list
		v4.3.1
		v4.4.1
-> 		v5.0.0
		v5.2.0
		v6.0.0

Node Version Manager

Asignar versión de Node


							$ > nvm use v6.0.0

Node Version Manager

Crear un Alias


							$ > nvm alias miProyecto 6
$ > miProyecto -> 6 (-> v6.0.0)

nvm alias default > setea versión por defecto

Node Version Manager

Borrar un Alias


							$ > nvm unalias miProyecto 6
$ > miProyecto -> 6 (-> v6.0.0)

Node Version Manager

Paquetes globales en NVM


							$ > nvm install 6.0.0 --reinstall-packages-from 5.0.0

$ > nvm which 6.0.0 - Indica la ruta de instalación

npm CLI

Inicializar un proyecto npm


							$ > npm init
$ > npm init -y // Sin asistente

Lanza asistente de creación de package.json si no añadimos el flag -y

npm CLI

Estructura del package.json


							{
  "name": "@schibstedspain/sui-card",
  "version": "7.1.0",
  "main": "dist/",
  "scripts": {
    "dist": "npm run dist:scripts && npm run dist:styles",
    "test": "mocha --compilers js:babel-core/register  --recursive",
  },
  "dependencies": {
    "classnames": "2.2.0"
  },
  "devDependencies": {
    "@schibstedspain/sui-multimedia": "0.1",
  }
}

Ejemplo resumido de archivo de meta-datos del proyecto npm

npm CLI

Instalación de paquetes npm


							$ > npm install [nombre del package]
$ > npm install [nombre del package]@3.4.12 // Versión específica
$ > npm i [nombre del package] // shortcut

prueba $ > npm isntall

npm CLI

Instalación de paquetes locales


							$ > npm install [nombre del package] -S
$ > npm install [nombre del package] --save

Añadimos como dependencia en package.json

npm CLI

Instalación de paquetes como dependencia de desarrollo


							$ > npm install [nombre del package] -D
$ > npm install [nombre del package] --save-dev

Añadimos como dependencia de desarrollo en package.json

npm CLI

Instalación de paquetes globales


							$ > npm install [nombre del package] -g
$ > npm install [nombre del package] --global

Estará disponible a nivel de usuario

npm CLI

Instalación de múltiples paquetes


							$ > npm install [package1] [package2] [package3] --save

También podemos añadir múltiples argumentos

npm CLI

Actualización de paquetes


							$ > npm update [package]

Obtenemos la versión más reciente del repositorio de npm

npm CLI

Desinstalación de paquetes


							$ > npm uninstall [package] // sólo borramos carpeta node_modules
$ > npm uninstall [package] --save // eliminamos dep
$ > npm uninstall [package] --save-dev // eliminamos devDep

$ > npm un [package]

Utiliza el flag --save o --save-dev para eliminarlo del package.json

npm CLI

Enlazar paquetes locales


							$ > npm link // En el paquete a enlazar
$ > npm link [package] // En el paquete que carga la dependencia

Crea un Symlink a la carpeta node_modules local ...a veces no funciona :( ...acepta un único nivel de recursividad

npm CLI

Desenlazar paquetes


							$ > npm unlink // En el paquete a desenlazar
$ > npm unlink [package] // En el paquete que cargaba la dependencia

Al desenlazar un paquete necesitaremos volver a ejecutar npm install

npm CLI

Publicar un paquete a npm


							$ > npm publish

Un paquete no puede volver a re-publicarse con la misma versión Si despublicas un paquete puedes romper Internet

npm CLI

Mostrar información de un paquete


							$ > npm view [package]
$ > npm view [package] versions

Lee metadatos del package.json

npm Scripts

Ejecutar un script


							"scripts": {
  "sass": "node-sass -o dist/css src/scss"
 }

$ > npm run sass

Mediante 'npm run [script]' podemos ejecutar scripts definidos en el package.json

npm Scripts

Agrupando scripts


							"scripts": {
  "lint:sass": "sass-lint src/**/*.scss -c -v",
  "lint:js": "eslint src/js/**/*.js",
  "lint": "npm run lint:sass && npm run lint:js"
 }

$ > npm run lint
$ > npm run lint:sass
$ > npm run lint:js

'npm run lint' ejecutaría 'npm run lint:sass' y 'npm run lint:js'

npm Scripts

npm Start


							"scripts": {
  "start": "npm run start:open && npm run start:server",
  "start:server": "webpack-dev-server",
  "start:open": "opener http://localhost:8080"
 }

$ > npm run start
$ > npm start

script standar para lanzar un proyecto npm 'npm start' no necesita especificar 'run'

npm Scripts

ciclo de ejecución de scripts


							"scripts": {
  "predist": "rimraf ./dist/*",
  "dist": "webpack",
  "postdist": "copyfiles ./dist/* ./docs/ && gh-pages -d docs"
 }

$ > npm run dist

npm buscará scripts con prefijos 'pre' y 'post' y si existen los ejecutará antes y después respectivamente

Frontend Boilerplate

Instalación de node-sass


						"scripts": {
  "css": "node-sass -o dist/css src/scss --output-style compressed --source-map-embed"
}

$ > npm install node-sass --save-dev
$ > npm run css

node-sass es un wrapper de 'LibSass' sobre node que nos permite preprocesar archivos '.scss'

Frontend Boilerplate

Instalación de autoprefixer


						"scripts": {
  "autoprefixer": "postcss -u autoprefixer --autoprefixer.browsers '> 5%, ie 9' -r dist/css/*"
}

$ > npm install autoprefixer postcss-cli --save-dev
$ > npm run autoprefixer

node-sass es un wrapper de 'LibSass' sobre node que nos permite preprocesar archivos '.scss'

Frontend Boilerplate

Instalación de BabelJS


						"scripts": {
  "build:js": "babel src/js --out-dir dist/js"
}

$ > npm install babel-cli babel-preset-es2015 --save-dev
$ > npm run build:js

BabelJS es un transpiler de archivos JS que nos permite utilizar versiones futuras de Javascript Instala en la raiz de tu proyecto un archivo .babelrc con la configuración

Frontend Boilerplate

Linting de Sass y Javascript con Eslint


						"scripts": {
  "lint:sass": "sass-lint src/**/*.scss -c -v",
  "lint:js": "eslint src/js/**/*.js",
  "lint": "npm run lint:sass && npm run lint:js"
}

$ > npm install eslint sass-lint babel-eslint --save-dev
$ > npm run lint

Eslint es un potente linter que soporta Sass, JS y JSX Instala en la raiz de tu proyecto un archivo .eslintrc.json con la configuración Instala en la raiz de tu proyecto un archivo .sass-lint.yml con la configuración

Frontend Boilerplate

Test unitarios con MochaJS y Chai


						"scripts": {
  "test": "mocha --compilers js:babel-register",
  "test:watch": "mocha --compilers js:babel-register --watch"
}

$ > npm install mocha chai --save-dev
$ > npm run test
$ > npm run test:watch // modo TDD

MochaJS es un framework de test unitarios. Además instalaremos la librería de aserciones Chai

Frontend Boilerplate

Pre-commit hook


						"pre-commit": [
  "lint",
  "test"
]

$ > npm install precommit-hook --save-dev

El pre-commit hook no nos permitirá publicar a github si no pasamos las reglas especificadas por los linters

Frontend Boilerplate

Watching sass, js y html


						"scripts": {
  "watch:css": "onchange src/scss/*.scss -- npm run build:css",
  "watch:js": "onchange src/js/*.js -- npm run build:js",
  "watch:html": "onchange dist/*.html -- npm run serve"
}

$ > npm install onchange --save-dev

$ > npm run watch:css
$ > npm run watch:js
$ > npm run watch:html

OnChange nos permite detectar cambios en archivos para poder lanzar scripts npm

Frontend Boilerplate

Recargando el navegador con BrowserSync


						"scripts": {
	"serve": "browser-sync start --server dist --files dist",
	"dev": "parallelshell 'npm run watch:css' 'npm run watch:js' 'npm run serve'"
}

$ > npm install browser-sync parallelshell --save-dev

$ > npm run dev

ParallelShell nos permite tener múltiples procesos ejecutándose al mismo tiempo

Gracias!

Twitter - @d4vecarter
Youtube - Aprendiendo Frontend
GitHub - davecarter
LinkedIn - David García