2021_08 Actualización de sip 2.0b11 a 2.0b12

Novedades

Por favor revisa https://github.com/pasosdeJesus/sip/releases/tag/v2.0b12

Procedimiento de actualización de motores o aplicaciones que usen sip:

Para actualizar tu aplicación que usa sip a la versión 2.0b12, usar kt-paperclip en lugar de paperclip y actualizar a webpacker 6.0.0.rc.1, webpack 5 y bootstrap 5:

• En Gemfile usa la versión más reciente de sip en rama main, la versión 6.0.0.rc.1 de webpacker y la gema kt-paperclip en lugar de paperclip

  gem 'sip',  
    git: 'https://github.com/pasosdeJesus/sip.git', branch: :main
  
  gem 'webpacker', '6.0.0.rc.1' #git: 'https://github.com/rails/webpacker'
  
  gem `kt-paperclip, git: 'https://github.com/kreeti/kt-paperclip.git'
  

• Ejecuta:

  bundler
  

• Desde el directorio con package.json ejecuta:

  yarn add @rails/[email protected] --exact
  yarn add @popperjs/core 
  yarn add babel-plugin-macros
  

• Edita package.json para:

  • Quitar el ^ a @rails/[email protected] en caso de haberlo.
  • Aumentar versión de expose-loader a 3.0.0.
  • Aumentar versión de bootstrap a ^5.1.0
  • Asegurar que tiene "popper.js": "^2.0.0-next.4"
  • Asegurar que los nuevos paquetes @popperjs/core y babel-plugin-macros quedan en la sección dependencies (y no en devDependencies)
  • Quitar webpack (pues la versíon apropiada será requerida por webpacker)

• Después actualiza con:

  yarn
  yarn upgrade
  yarn
  

• A continuación cambia la estructura de directorios:

  git mv app/javascript app/packs
  git mv app/packs/packs app/packs/entrypoints
  mv config/webpack config/webpack-ant
  git rm config/webpack/environment.js
  

• E instala lo nuevo de webpacker 6 con:

  bin/rails webpacker:install
  

  remplazando archivos anteriores por los nuevos.

• Mezcla configuraciones que tuvieras en config/webpack-ant en config/webpack teniendo en cuenta:

  • Ya no se usa environment.js sino base.js
  • Ya no es necesario configurar jquery en esos archivos.
  • Renombra environment por webpackConfig

• También es importante:

  git add config/webpack/base.js
  

• En app/packs/entrypoints/application.js

  1. Cambia import {$, jQuery} from "jquery" por la nueva sintaxis soportada por expose-loader 3 (que ya no requiere modificación en config/webpack/): import $ from "expose-loader?exposes=$,jQuery!jquery"
  2. Carga bootstrap con: import * as bootstrap from 'bootstrap'

• Si en algún archivo de maquetación (layout) o vista llamas javascript_pack_tag 'application' debes hacerlo con

  javascript_pack_tag 'application', 'data-turbolinks-track': 'reload',  defer: false`.
  

• Edita nuevamente package.json para agregar a la sección browserslistrc el contenido del archivo .browserslistrc de manera que quede algo como:

{
...
  "browserslist": [
    "defaults"
  ]
}       

y después elimina .browserslistrc:

  git rm .browserslistrc

• Ejecuta

  bin/rails assets:precompile --trace
  

  Corrige posibles problemas y prueba la aplicación.

Detalles de la implementación del cambio en sip

• Webpacker 6.0.0.rc.1 y Webpack 5 en https://github.com/pasosdeJesus/sip/issues/62
• Bootstrap 5: https://github.com/pasosdeJesus/sip/issues/65