@schibstedspain/suistudio-webpack NPM

THIS PACKAGE IS DEPRECATED!

Use @schibstedspain/sui-bundler instead.

suistudio-webpack

De cero a producción con tu aplicación en ES6 / React sin ficheros de configuración.

Instalación

$ npm i @schibstedspain/suistudio-webpack -DE

Uso:

Lo mejor que puedes hacer es agregar estos scripts a tu package.json

"scripts": {
  "build": "suistudio-webpack build -C",
  "start": "suistudio-webpack dev",
  "phoenix": "rm -Rf node_modules && npm i --cache-min=999999"
}

## Requisitos: Para usar esta herramienta necesitarás node 6 o superior.

Estructura

Puedes encontrar lo mínimo que se espera en la carpeta example

básicamente espera un proyecto en la forma:

.
├── package.json
└── src
    ├── index.html
    └── app.js

El punto de entrada de la aplicación es siempre src/app.js y la web se encuantra en index.html

CLI

Desarrollo

Durante el desarrollo de la aplicación tendrás hot module reload y browserstack. Podrás encontrarlo en localhost:3000

$ suistudio-webpack dev

Producción

Dentro de la carpeta public están los estáticos listos para ser deployados a producción.

$ suistudio-webpack build

Si deseas borrar la carpeta public antes de generar los nuevos estáticos, usa el flag --clean | -C

Vendors / Envs

Si no quieres no tienes por que usar ninguna configuración, pero si deseas optimizar tus estáticos, puesdes usar la siguiente configuración dentro de tu package.json

"suistudio-webpack": {
  env: ["APP_NAME", ["USER", "DEFAULT_VALUE"]],
  "vendor": ["react", "react-dom"],
  "cdn": "https://url_to_me_cdn.com/",
  alias: {"react": "preact"},
  "offline": true,
  "externals": {
    "jquery": "./node_modules/jquery/jquery.min.js"
  }
}

La url al CDN *DEBE acabar con un / final

Cualquier variable de entorno, la tendrás disponible en tu fichero index.html mediante en htmlWebpackPlugin.options.env

<html data-env="<%= htmlWebpackPlugin.options.env.NODE_ENV || 'development' %>">

Offline

Esta desactivado por defecto. Para activarlo, tienes que poner offline: true en la configuración del suistudio-webpack de tu proyecto.

En el punto de entrada de tu apliación debes registrar el serviceWorker con el siguiente snippet:

import {register, unregister} from '@schibstedspain/suistudio-webpack/registerServiceWorker'
register({
  first: () => window.alert('Content is cached for offline use.'),
  renovate: () => window.alert('New content is available; please refresh.')
})()

debes propocionar un hadler para cuando se cachea por primera vez contenido y otro para cuando hay nuevo contenido cacheado y tienes que refrescar la página para poder disfrutarlo.

Si estas usando Firebase, es recomendable no cachear en absoluto el fichero serviceWorker.js agregando esta configuración al fichero firebase.json

{
  "hosting": {
    "headers": [{
      "source" : "/service-worker.js",
      "headers" : [ {
        "key" : "Cache-Control",
        "value" : "no-cache"
      }]
    }]
  }
}

Si deseas dar de baja tu service worker solo tienes que reemplazar tu llamada a register por unregister

Caching

Puedes configurar que quieres cachear para ser usado offline:

"offline": {
  whitelist: ["::all::"]
  "runtime": [{
    "urlPattern": "ms-mt--api-web\\.spain\\.schibsted\\.io",
    "handler": "networkFirst"
  },{
    "urlPattern": "fonts\\.googleapis\\.com",
    "handler": "fastest"
  },{
    "urlPattern": "prea\\.ccdn\\.es\/cnet\/contents\/media",
    "handler": "cacheFirst",
    "options": {
      "cache": {
        "name": "image-cache",
        "maxEntries": 50
      }
  }}]
}

runtime usa la mismo API que (sw-toolbox)https://googlechrome.github.io/sw-toolbox/

además whitelist es un listado de regexp que indican que páginas son seguras para hacer solo CSR. Puedes usar el string ::all:: para indicar que siempre quieres usar CSR.

Si no defines un listado whitelist. Siempre se hará SSR

Externals

Cumple la función de subir una librería external a tu proyecto que normalmente lo pondrías a mano con su propio tag script, a tu cdn, y colocar una referencia a el en index.html y con un hash que representa el contenido del fichero.

Hot Module Replacement - React

Lo tienes todo preparado para poder usarlo en tus proyectos de react. Solo tienes que aplicar estas instrucciones en tu app.js https://webpack.js.org/guides/hmr-react/#code