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