Webpack 5

A partir de Jutro 8.0.0, las nuevas aplicaciones usan Webpack 5 de forma predeterminada.

Warning: Cuando utilice React 18, debe usar Webpack 5. Webpack 4 no es compatible.

Migración a Webpack 5

Siga estos pasos al migrar de Webpack 4 a Webpack 5:

1. Si tiene configuraciones de invalidación personalizadas para Webpack 4, asegúrese de transferirlas a Webpack 5.

2. Instale los siguientes paquetes:

   • @jutro/browserslist-config

3. Elimine la dependencia webpack del archivo package.json de su aplicación.

4. Actualice el script de start-webpack en el archivo package.json de la siguiente manera:

   Old:

   "start-webpack": "node ./scripts/serve.mjs"

   New:

   "start-webpack": "jutro-tools app serve"

5. Actualice el script de build-webpack en el archivo package.json de la siguiente manera:

   Old:

   "build-webpack": "cross-env GENERATE_SOURCEMAP=false node ./scripts/build.mjs"

   New:

   "build-webpack": "cross-env GENERATE_SOURCEMAP=false jutro app:build"

6. Elimine la carpeta obsoleta scripts en la raíz del proyecto.

Íconos personalizados

Si va a renderizar íconos personalizados, edite la ruta a la carpeta íconos en su archivo .env por la siguiente:

JUTRO_APP_CLIENT_ICONS_PATH=./src/assets/icons

Importación de estilos

Asegúrese de que el archivo startApp.js importe estilos como se muestra a continuación:

startApp.js

import '@jutro/theme';
import './styles/index.scss';

Su archivo Theme.scss solo debe almacenar fuentes. Vea el siguiente ejemplo:

Theme.scss

$fonts-root: '~@jutro/theme/assets/fonts';

// ------------------------------------
//   GROUNDED CSS MODULES
// ------------------------------------
@import '~@jutro/theme/assets/fonts/fonts';

Microfrontend federado de Webpack 5

Para obtener más información, consulte nuestros documentos sobre el uso de microfrontends.

Archivo de configuración de Webpack 5

La aplicación ya está configurada con todos los ajustes básicos para que se ejecute correctamente. Sin embargo, si tiene algunos archivos no estándares u otras necesidades, puede configurar Webpack 5 agregando un archivo overrides.config.js a la raíz de su aplicación.

En este ejemplo, se describen todas las invalidaciones disponibles:

// Overrides structure and API
module.exports = {
  // webpack configuration
  webpack: {
    // configs and feature flags
    config: {
      /**
       * force disable TS checks. TsCheck is enabled by default
       * @default false
       */
      skipTsChecks: false,
      /**
       * Setup extra aliases in webpack config
       * @default undefined
       *
       * Aliases config is object of Record<string, string> type. For more information
       * pleases refer to official webpack documentation
       */
      alias: {},
    },
    /**
     * entries to manage loaders.
     * Do we need more specific entries?
     */
    loaders: {
      /**
       * access to babel-loader which is used for application files
       * by default does nothing and returns input object
       */
      babelLoaderApp: (loader) => loader,
      /**
       * access to babel-loader which is used for @jutro packages processing
       * by default does nothing and returns input object
       */
      babelLoaderPkg: (loader) => loader,
      /**
       * list of extra loaders which should be added to configuration
       * @default undefined
       */
      custom: [],
    },
    /**
     * Add or configure webpack plugins
     * Could be array of plugins or function
     * 1) When array is provided - plugins are added at beginning of list [...clientPlugins, ...defaultPlugins]
     * 2) When function is provided - list of default plugins is passed as argument and list of plugins is expected as result
     * @default undefined
     */
    plugins: (plugins) => [...plugins],
    // plugins: []
    /**
     * Entry point to check/modify configuration after all transformations
     * Receives whole config as an argument and expect finalized configuration as result
     * @default undefined
     */
    final: (config) => ({ ...config }),
    /**
     * Module Federation Block
     * To be fully defined during migration from existing micro frontends solution to webpack module federation
     *
     * Exists to configuration variants: host and module
     */
    moduleFederation: {
      /**
       * required uniq name
       */
      name: 'hostapp',
      // name: 'jutroapp', // a unique micro frontend name in case of federated micro frontend
      /**
       * Host required field
       * Specifies federated packages and origins where they are hosted
       * format:
       * {
       *   [importName]: 'moduleUniqName@url_to_entry_point'
       * }
       * importName - represents import inside of application
       * moduleUniqName - module.name field value from federated module config
       * url_to_entry_point - url to hosted file
       */
      remotes: {},
      /**
       * Module required field
       * Specifies list of entries which should be exposed as federated modules
       *
       * Refer to official webpack module federation docs for more info
       *
       * When 'jutro-app' provided, this is default predefined preset for modules
       * added on basis of regular jutro-app-template
       *
       * Same as:
       * exposes: {
       *    './startApp': './src/startApp',
       * },
       * filename: 'remoteEntry.js';
       */
      exposes: 'jutro-app',
      /**
       * Module optional field
       * Specifies module entry-point file name
       *
       * @default 'remoteEntry.js'
       */
      filename: 'remoteEntry.js',
      /**
       * Entry point to override/extend shared libs
       * Receives default libraries configuration end expect shared
       * libraries configuration
       *
       * Refer to official webpack module federation docs for more info
       *
       * @default undefined
       */
      shared: (sharedDefaults) => ({ ...sharedDefaults }),
    },
  },
  /**
   * project related paths configuration
   * Could be object or function
   *
   * NOTE: When object is provided, setup will try to resolve each
   * field relatively to application root
   *
   * Function receives existing configuration and expects updated one as result
   *
   * @default undefined
   */
  paths: {
    // htmlPath: 'public/index.html',
  },
  // paths: old => ({ ...old, }), // or { pathVariable: 'value' }
};

Desactivación de la validación de TypeScript

Para desactivar la validación de TypeScript en la compilación de Webpack, actualice el indicador skipTsChecks en su archivo de invalidaciones de configuración (por ejemplo, overrides.config.js):

// Overrides structure and API
module.exports = {
  webpack: {
    config: {
      /**
       * Force disable TypeScript checks. They are enabled by default.
       * @default false
       */
      skipTsChecks: true, // <-- Set this to true to disable TypeScript validation

      alias: {},
    },
    // ...other webpack override options
  },
  // ...other project config
};

Establecer skipTsChecks en true deshabilita la comprobación de tipo de TypeScript y solo transpila el código. Es posible que su editor aún muestre errores de tipo, pero ya no falla la compilación de Webpack.