Skip to content

Latest commit

 

History

History
679 lines (551 loc) · 19.9 KB

clase50.md

File metadata and controls

679 lines (551 loc) · 19.9 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 50

NPM

npm_logo

Documentación

Instalar paquetes:

  • global:
npm install -g <paquete>
  • local:
npm install <paquete>

Buscar paquetes

  npm search <paquete>

Información de los paquetes

  npm view <paquete>

Lista de paquetes instalados

  npm ls

Lista de paquetes instalados globalmente

  npm ls -g

Instalando versiones especificas:

  • la más reciente:
  npm install <paquete>@latest
  • versión especifica:
  npm install <paquete>@1.x (1.xx.xx)
  • Otra versión especifica
  npm install <paquete>@2.10.x (2.10.x)

Paquetes desactualziados:

npm outdated

Actualizando paquetes:

npm update <paquete>

Desinstalando paquete:

npm uninstall <paquete>

Información sobre Bugs

npm bugs <paquete>

Más comandos - CLI

npx

npx

A partir de la versión v5.2.0 de npm se incluye un nuevo binario llamado npx.

Al igual que npm permite manejar las dependencias de un proyecto a través del repositorio de paquetes, con npx también vamos a poder manejar ejecutables que no tengamos instalados en nuestra máquina. Si ejecutamos un comando a través de npx (ej. npx cowsay "Hola") se intentará ejecutar dicho paquete desde nuestro directorio actual, en el caso de que no se encuentre descargado se descargará automáticamente y se ejecutará.

Un uso común que se le puede dar es el de ejecutar paquetes que normalmente no utilizamos a menudo (por ejemplo yeoman o create-react-app), como pueden ser generadores de código o paquetes que no queramos descargar para ocupar sitio en el disco.

También se puede utilizar para invocar paquetes en otras versiones de node:

# Con "-p" añadimos un paquete a "$PATH"
npx -p node@8 npx cowsay "Hola"
# Descargamos cowsay y lolcatjs, a continuación hacemos un "echo"
# y la salida se la pasamos a "cowsay" y "lolcat"
npx -p cowsay -p lolcatjs -c 'echo "$npm_package_name@$npm_package_version" | cowsay | lolcatjs'

Dependency Hell:

img

Abyssus abyssum invocat. El abismo llama al abismo (Un paso en falso lleva a otro).

package.json

  • Datos proyecto

  • Tareas

  • Dependencias (dependencies y devDependencies)

  • Documentación

  • Creación:

  npm init
  • Guardar nuevas dependencias:
 npm install <paquete> --save
  • Guardar nuevas dependencias (solo para entorno desarrollo):
 npm install <paquete> --save -dev
  • Guardando versiones especificas:
    • (1.xx.xx):
  npm install --save <paquete>@1.x
  • (2.10.x)
  npm install --save <paquete>@2.10.x
  • Latest
  npm install --save <paquete>@lastest
  • Quitando dependencias:
  npm uninstall <paquete> --save
  • Instalamos las dependencias en el proyecto:
    • todo:
  npm install (todo)
  • Solo production:
  npm install --production (solo producción)
  • Solo development:
  npm install --dev
  • Semantic Versioning
    • Estructura -> X.Y.Z-Extra
    • Cambio Mayor - No retrocompatible
    • Cambio Menor - Retrocompatible - Nuevas funcionaldiades o cambios
    • Parche - Retrocompatible - Solución de errores
    • Extras - Indicativos o versiones especiales (Beta, Alfa, x86, etc...)

npm scripts (comandos de CLI)

  • Añadiendo comandos:
  // ...
  "scripts": {
      "test": "npm -v",
      "start": "node -v",
      "hola": "echo 'Hola mundo!'"
  }
  // ...
  • Mostrando todos los comandos:
    npm run
  • Ejecutando comandos:
    • test
    npm test
  • start
    npm start
  • hola
    npm run hola

YARN

yarn_logo

Documentación

Iniciar un proyecto

yarn init

Añadir dependencias al proyecto

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

Añadir dependencias al proyecto en categorías

yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional

Actualizar dependencias

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

Eliminar dependencias

yarn remove [package]

Instalar todas las dependencias

yarn
yarn install

¿quien pidio este paquete?

yarn why [package]

Yarn o NPM@5?

Recursos

Bower

Bower Logo

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

Bower Instalamos Bower globalmente

  sudo npm install -g bower

Dependencias

  /home/ubuntu/.nvm/versions/node/v4.1.1/bin/bower -> /home/ubuntu/.nvm/versions/node/v4.1.1/lib/node_modules/bower/bin/bower
  bower@1.6.6 /home/ubuntu/.nvm/versions/node/v4.1.1/lib/node_modules/bower
  ├── is-root@1.0.0
  ├── destroy@1.0.3
  ├── stringify-object@1.0.1
  ├── junk@1.0.2
  ├── chmodr@1.0.2
  ├── user-home@1.1.1
  ├── q@1.4.1
  ├── abbrev@1.0.7
  ├── opn@1.0.2
  ├── bower-endpoint-parser@0.2.2
  ├── bower-logger@0.2.2
  ├── lockfile@1.0.1
  ├── archy@1.0.0
  ├── graceful-fs@3.0.8
  ├── nopt@3.0.6
  ├── lru-cache@2.7.3
  ├── retry@0.6.1
  ├── tmp@0.0.24
  ├── semver@2.3.2
  ├── md5-hex@1.1.0 (md5-o-matic@0.1.1)
  ├── fs-write-stream-atomic@1.0.4 (graceful-fs@4.1.2)
  ├── p-throttler@0.1.1 (q@0.9.7)
  ├── request-progress@0.3.1 (throttleit@0.0.2)
  ├── shell-quote@1.4.3 (array-filter@0.0.1, array-reduce@0.0.0, jsonify@0.0.0, array-map@0.0.0)
  ├── chalk@1.1.1 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
  ├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
  ├── promptly@0.2.0 (read@1.0.7)
  ├── fstream@1.0.8 (inherits@2.0.1, graceful-fs@4.1.2)
  ├── which@1.2.0 (is-absolute@0.1.7)
  ├── bower-registry-client@1.0.0 (async@0.2.10, graceful-fs@4.1.2, request-replay@0.2.0, mkdirp@0.3.5)
  ├── mkdirp@0.5.0 (minimist@0.0.8)
  ├── glob@4.5.3 (inherits@2.0.1, inflight@1.0.4, once@1.3.3, minimatch@2.0.10)
  ├── fstream-ignore@1.0.3 (inherits@2.0.1, minimatch@3.0.0)
  ├── rimraf@2.4.4 (glob@5.0.15)
  ├── insight@0.7.0 (object-assign@4.0.1, async@1.5.0, tough-cookie@2.2.1, lodash.debounce@3.1.1, configstore@1.3.0, os-name@1.0.3)
  ├── bower-config@1.2.2 (graceful-fs@4.1.2, osenv@0.1.3, optimist@0.6.1)
  ├── github@0.2.4 (mime@1.3.4)
  ├── tar-fs@1.8.1 (pump@1.0.1, tar-stream@1.3.1)
  ├── request@2.53.0 (forever-agent@0.5.2, aws-sign2@0.5.0, caseless@0.9.0, tunnel-agent@0.4.1, oauth-sign@0.6.0, isstream@0.1.2, stringstream@0.0.5, json-stringify-safe@5.0.1, tough-cookie@2.2.1, qs@2.3.3, node-uuid@1.4.7, form-data@0.2.0, mime-types@2.0.14, combined-stream@0.0.7, http-signature@0.10.1, bl@0.9.4, hawk@2.3.1)
  ├── cardinal@0.4.4 (ansicolors@0.2.1, redeyed@0.4.4)
  ├── update-notifier@0.3.2 (is-npm@1.0.0, string-length@1.0.1, semver-diff@2.1.0, latest-version@1.0.1)
  ├── decompress-zip@0.1.0 (mkpath@0.1.0, touch@0.0.3, readable-stream@1.1.13, binary@0.3.0)
  ├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)
  ├── inquirer@0.10.0 (strip-ansi@3.0.0, ansi-regex@2.0.0, figures@1.4.0, ansi-escapes@1.1.0, cli-width@1.1.0, rx-lite@3.1.2, through@2.3.8, readline2@1.0.1, cli-cursor@1.0.2, run-async@0.1.0, lodash@3.10.1)
  ├── mout@0.11.1
  └── configstore@0.3.2 (object-assign@2.1.1, xdg-basedir@1.0.1, uuid@2.0.1, osenv@0.1.3, js-yaml@3.4.5)

Arrancamos bower.json

  bower init

  {
    "name": "pruebas_bower",
    "homepage": "https://github.com/UlisesGascon/Curso-in-company-NexTReT",
    "authors": [
      "ulisesgascon"
    ],
    "description": "",
    "main": "",
    "moduleType": [],
    "license": "MIT",
    "private": true,
    "ignore": [
      "**/.*",
      "node_modules",
      "bower_components",
      "test",
      "tests"
    ]
  }

Buscamos paquetes

  bower search <paquete>
  bower search jquery

Instalando Paquetes

  bower install <paquete>
  bower install jquery

Instalando versiones especificas del paquete

  bower install <package>#<version>

Instalando Paquetes y guardandolos en bower.json

  bower install <paquete> -save
  bower install bootstrap -save

  ulisesgascon:~/workspace/profe/pruebas_bower (master) $ bower install bootstrap -save
  bower jquery#~2.1.4             cached git://github.com/jquery/jquery.git#2.1.4
  bower jquery#~2.1.4           validate 2.1.4 against git://github.com/jquery/jquery.git#~2.1.4
  bower bootstrap#*           not-cached git://github.com/twbs/bootstrap.git#*
  bower bootstrap#*              resolve git://github.com/twbs/bootstrap.git#*
  bower bootstrap#*             download https://github.com/twbs/bootstrap/archive/v3.3.5.tar.gz
  bower bootstrap#*              extract archive.tar.gz
  bower bootstrap#*             resolved git://github.com/twbs/bootstrap.git#3.3.5
  bower jquery#~2.1.4            install jquery#2.1.4
  bower bootstrap#~3.3.5         install bootstrap#3.3.5

  // bower.json
  {
    "name": "pruebas_bower",
    "homepage": "https://github.com/UlisesGascon/Curso-in-company-NexTReT",
    "authors": [
      "ulisesgascon"
    ],
    "description": "",
    "main": "",
    "moduleType": [],
    "license": "MIT",
    "private": true,
    "ignore": [
      "**/.*",
      "node_modules",
      "bower_components",
      "test",
      "tests"
    ],
    "dependencies": {
      "jquery": "~2.1.4",
      "bootstrap": "~3.3.5"
    }
  }

Borrando paquetes

  bower uninstall <paquete>
  bower uninstall jquery

Borrando paquetes y guardandolos en bower.json

  bower uninstall <paquete>
  bower uninstall jquery

Verificando los paquetes instalados y sus dependencias

  bower list

  ulisesgascon:~/workspace/profe/pruebas_bower (master) $ bower list
  bower check-new     Checking for new versions of the project dependencies...
  pruebas_bower /home/ubuntu/workspace/profe/pruebas_bower
  ├─┬ bootstrap#3.3.5 (latest is 4.0.0-alpha)
  │ └── jquery#2.1.4 (3.0.0-alpha1+compat available)
  └── jquery#2.1.4 (latest is 3.0.0-alpha1+compat)

Actualizando todo

  bower update

Actualizando un paquete específico

  bower update <package>

Usando Bower

  bower list -paths

  ulisesgascon:~/workspace/profe/pruebas_bower (master) $ bower list -paths

    bootstrap: [
      'public/vendor/bootstrap/less/bootstrap.less',
      'public/vendor/bootstrap/dist/js/bootstrap.js'
    ],
    jquery: 'public/vendor/jquery/dist/jquery.js'

  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <title>Bootstrap 101 Template</title>

      <!-- Bootstrap -->
      <link href="public/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    </head>
    <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="public/vendor/jquery/dist/jquery.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="public/vendor/bootstrap/dist/js/bootstrap.js"></script>
    </body>
  </html>

Bower (Entendiendo el funcionamiento)

bower.json. ¿Qué necesitamos?

  {
      "name": "Mi Aplicación",
      "version": "1.0.0",
      "dependencies": {
          "modernizr": "*",
          "jquery": "~2.0.2",
          "bootstrap": "*",
          "requirejs": "*"
      }
  }

.bowerrc ¿Donde lo necesitamos?

  {
      "directory": "public/vendor",
      "json": "bower.json"
  }

Instalamos todo lo anterior

  bower install

Bower (Trucos)

  • Se puede instalar componentes aislados primero y luego hacer bower init para generar el bower.json con todo incluido.

  • Ignoramos la carpeta bower_components con .gitignore. Recuerda que haciendo bower.init se instala todo de nuevo.

  • Instalación de paquetes más alla de los definidos en search:

  • Paquetes registrados:

  $ bower install jquery
  • Acesso directo -> GitHub:
  $ bower install desandro/masonry
  • .git:
  $ bower install git://github.com/user/package.git
  • URLs:
  $ bower install http://example.com/script.js

Los problemas de BOWER

img

Limitaciones

  • Gestión de conflictos manual
  • Fiarnos del patrón SEMVER por parte de otr@s developers
  • Sistema de paquetes propio
  • Redundancia respecto a NPM
  • Maravillo mundo del Dependency hell

Bower ha muerto

img

BOWER is dead. Only use it for legacy reasons.

Literatura al respecto

La nueva generación

Paso 1: Tus herramientas son las de siempre

Paso 2: Pasar del bower.json al package.json

Paso 3: Deja de usar wiredep y empieza a usar solamente require()

Nota: Esto es al estilo Browserify exclusivamente

Extra 1: Cosas Interesantes

Extra 2: Un mundo de información te espera

Extra 3: Ejemplos