juillet 16, 2024

Migrer de Webpack vers Vite / Blogs / Perficient

Webpack est un incroyable bundler pour JavaScript et, avec le bon chargeur, il peut également transformer CSS, HTML et d’autres ressources. Lorsqu’un nouveau projet AEM est créé via l’archétype de projet AEM et que le module frontal est défini sur général, Adobe fournit une configuration Webpack pour générer les bibliothèques clientes du projet.

Présentation de Vite

Vite est un nouvel outil de construction qui est récemment entré en scène. Vous pouvez vérifier le Tendances du NPM ici.

Par rapport à Webpack,

Vite offre des temps de construction nettement plus rapides et un rechargement à chaud pendant le développement.
Vite utilise Rollup. Rollup génère de petits bundles en utilisant des optimisations telles que le tremblement d’arbre, les modules ES6, le levage de portée, la minification, le fractionnement de code et un écosystème de plugins.

Évitez les problèmes de configuration avec Vite

Si vous avez de l’expérience avec Webpack, vous connaissez les défis liés à la configuration de différents chargeurs pour prétraiter vos fichiers. Beaucoup de ces configurations sont inutiles avec Vite. Vite prend en charge TypeScript dès le départ. Vite fournit une prise en charge intégrée des fichiers .scss, .sass, .less, .styl et .stylus. Il n’est pas nécessaire d’installer des plugins spécifiques à Vite pour eux. Si le projet contient une configuration PostCSS valide, elle s’appliquera automatiquement à tous les CSS importés. Cela change vraiment la donne.

Projet « Jeté »

« Vite » vient du mot français signifiant « rapide ». En musique, le terme « Vite » fait référence au jeu à un rythme accéléré. Pour le tutoriel suivant, j’ai choisi le terme musical « Jete » pour le nom de notre projet. « Jeté » fait référence à une technique d’archet dans laquelle le joueur doit laisser l’arc rebondir ou sauter des cordes. Inspirons-nous de ce terme musical et « rebondissons » dans notre tutoriel.

Tutoriel Migration de Webpack vers Vite

Créez un projet AEM via l’archétype de projet AEM :

mvn -B archetype:generate -D archetypeGroupId=com.adobe.aem -D archetypeArtifactId=aem-project-archetype -D archetypeVersion=49 -D aemVersion=cloud -D appTitle="Jete" -D appId="jete" -D groupId="com.jete" -D frontendModule=general -D includeExamples=n

Une fois votre projet créé, installez votre projet dans votre instance AEM :

mvn clean install -PautoInstallSinglePackage

Après avoir vérifié le site Jete dans AEM, nous pouvons commencer à migrer notre projet frontend vers Vite.

Sauvegardez le répertoire ui.frontend existant :

cd jete/ 

mv ui.frontend ../JeteFrontend 

From within “jete” run: 

npm create vite@latest

Utiliser « aem-maven-archétype » pour le nom du projet, sélectionnez Vanille pour le cadre, et « Manuscrit » pour la variante.

Renommez le répertoire « aem-maven-archetype » en « ui.frontend ». Nous avons choisi ce nom de projet pour qu’il corresponde au nom généré par l’archétype AEM.

mv aem-maven-archetype ui.frontend

Allons remettez le fichier pom.xml dans le répertoire frontend :

mv ../JeteFrontend/pom.xml ui.frontend

Puisque nous sommes mise à jour des fichiers POM, allons mettre à jour les versions Node et NPM dans le parent.

pom.xml file. 

<configuration>  

  <nodeVersion>v20.14.0</nodeVersion>  

  <npmVersion>10.7.0</npmVersion>  

</configuration>

Nous utiliserons divers utilitaires Node dans nos fichiers TypeScript. Installons le package Node Types.

npm install @types/node --save-dev 

Add the following compiler options to our tsconfig.json file: 

"outDir": "dist", 

"baseUrl": ".", 

"paths": { 

  "@/*": [ 

    "src/*" 

  ] 

}, 

"types": [ 

  "node" 

]

Ces options définissent le répertoire de sortie sur « dist », l’URL de base vers le répertoire actuel : « ui.frontend », créent un alias « @ » dans le répertoire src et ajoutent les types de nœuds à la portée globale.

Déplaçons notre répertoire « public » et le fichier index.html dans le répertoire « src ».

Créez un fichier nommé « vite.config.ts » dans le projet « ui.frontend ».

Ajoutez les configurations vite suivantes :

import path from 'path'; 

import { defineConfig } from 'vite'; 

export default defineConfig({ 

  build: { 

    emptyOutDir: true, 

    outDir: 'dist', 

  }, 

  root: path.join(__dirname, 'src'), 

  plugins: [], 

  server: { 

    port: 3000, 

  }, 

});

Mettez à jour le fichier index.html dans le répertoire «src » Annuaire. Changer la référence du main.ts fichier de « /src/main.ts » à « ./main.ts».

<script type="module" src="https://blogs.perficient.com/2024/07/16/adobe-sites-migrating-from-webpack-to-vite/./main.ts"></script>

Exécutez le serveur de développement Vite avec la commande suivante :

npm run dev

Vous devriez voir la page suivante :

Nous progressons !

Apportons quelques modifications spécifiques à AEM à notre configuration Vite.

Changement « Répsortie» à:

path.join(__dirname, 'dist/clientlib-site')

Ajoutez ce qui suit dans la section build :

lib: { 

  entry: path.resolve(__dirname, 'src/main.ts'), 

  formats: ['iife'], 

  name: 'site.bundle', 

}, 

rollupOptions: { 

  output: { 

    assetFileNames: (file) => { 

      if (file.name?.endsWith('.css')) { 

        return 'site.bundle.[ext]'; 

      } 

      return `resources/[name].[ext]`; 

    }, 

    entryFileNames: `site.bundle.js`, 

  }, 

},

Ces configurations définissent le fichier d’entrée, enveloppent la sortie dans une expression de fonction immédiatement invoquée (pour se protéger contre la pollution de l’espace de noms global), définissent les noms de bundle JavaScript et CSS sur site.bundle.js et site.bundle.css, et définissent la sortie. chemin des actifs vers un répertoire nommé « ressources ». L’utilisation du format « iife » nécessite la définition de la variable « process.env.NODE_ENV ».

Ajoutez une section « définir » au même niveau que « construire » avec l’option suivante :

define: { 

  'process.env.NODE_ENV': '"production"', 

}, 

Add a “resolve” section at the same level as “define” and “build” to use our “@” alias: 

resolve: { 

  alias: { 

    '@': path.resolve(__dirname, './src'), 

  }, 

}, 

Add the following “proxy” section within the “server” section: 

proxy: { 

  '^/etc.clientlibs/.*': { 

      changeOrigin: true, 

      target: 'http://localhost:4502', 

  }, 

},

Ces options indiquent au serveur de développement de transmettre par proxy toutes les requêtes commençant par /etc.clientlibs vers localhost:4502.

Il est temps de supprimer le code généré. Supprimez « index.html », « contrer.ts », « style.css », « typescript.svg », « public/vite.svg » du répertoire « src ». Supprimez tout de « main.ts ».

Déplacez la sauvegarde du fichier index.html vers le répertoire src :

cp ../JeteFrontend/src/main/webpack/static/index.html ui.frontend/src/

Modifier le fichier index.html. Remplacez le script incluant le « clientlib-site.js » par ce qui suit :

<script type="module" src="https://blogs.perficient.com/2024/07/16/adobe-sites-migrating-from-webpack-to-vite/./main.ts"></script>

Enregistrez l’image suivante dans « src/public/resources/images/ » :

https://raw.githubusercontent.com/PRFTAdobe/jete/main/ui.frontend/src/public/resources/images/favicon.ico

Ajoutez l’élément suivant dans la section head du fichier index.html :

<link rel="icon" href="https://blogs.perficient.com/2024/07/16/adobe-sites-migrating-from-webpack-to-vite/./resources/images/favicon.ico" type="image/x-icon" />

Pendant que nous mettons à jour les favicons, modifiez le

ui.apps/src/main/content/jcr_root/apps/jete/components/page/customheaderlibs.html file.

Ajoutez ce qui suit à la fin du fichier :

<link rel="icon" href="https://blogs.perficient.com/etc.clientlibs/jete/clientlibs/clientlib-site/resources/images/favicon.ico" type="image/x-icon" />

Exécutez à nouveau le serveur de développement Vite…

npm run dev

Vous devriez voir ce qui suit :

Projet Jete avec AEM Vite

Ce n’est pas très attractif. Ajoutons un peu de style. Exécutez la commande suivante pour installer « sass».

npm i -D sass

Créer un « main.scss » fichier sous le « src» répertoire.

touch main.scss

Modifier le main.ts fichier et ajoutez la ligne suivante en haut du fichier :

import '@/main.scss'

Copiez la feuille de style des variables de la sauvegarde frontale vers le dossier «src» répertoire :

cp ../JeteFrontend/src/main/webpack/site/_variables.scss ./ui.frontend/src/

Modifier le _variables.scss fichier et ajoutez ce qui suit :

$color-foreground-rgb: rgb(32 32 32);

Copiez la feuille de style de base de la sauvegarde frontale vers le dossier «src» répertoire :

cp ../JeteFrontend/src/main/webpack/site/_base.scss ./ui.frontend/src/

Incluez des références à ces fichiers dans main.scss:

@import 'variables'; 

@import 'base';

Exécutez à nouveau le serveur de développement Vite…

npm run dev

Vous devriez voir ce qui suit :

Projet Jete avec AEM Vite version 2

Les choses s’améliorent, mais il reste encore du travail à faire !

Copiez les feuilles de style du composant et du site de la sauvegarde frontend vers le répertoire « src » :

cp -R ../JeteFrontend/src/main/webpack/components ./ui.frontend/src/ 

 

cp -R ../JeteFrontend/src/main/webpack/site/styles ./ui.frontend/src/

Ajoutez ce qui suit au main.scss déposer:

@import './components/**/*.scss'; 

@import './styles/**/*.scss';

Exécutez le serveur de développement Vite…

npm run dev

Pas de chance cette fois! Vous serez je vois probablement cette erreur:

Projet Jete avec erreur AEM Vite

Vite ne comprend pas les « importations splat », les « importations génériques » ou les « importations globales ». Nous pouvons résoudre ce problème en installant un package et en mettant à jour le fichier de configuration de Vite.

Installez le package suivant :

npm i -D vite-plugin-sass-glob-import

Mettre à jour le vite.config.ts déposer. Ajoutez ce qui suit aux instructions d’importation :

import sassGlobImports from 'vite-plugin-sass-glob-import';

Ajouter « sassGlobImports» à la section plugins :

plugins: [sassGlobImports()],

Maintenant, allons exécutez à nouveau le serveur de développement Vite.

npm run dev

Vous devriez voir ce qui suit :

Projet Jete avec Aem Vite version 3

Beaucoup mieux. L’avant est superbe ! Il est temps de travailler sur les importations JavaScript !

TypeScript a bien fonctionné pour nous jusqu’à présent, il n’est donc pas nécessaire de revenir à JavaScript.

Supprimez le fichier JavaScript « helloworld » :

rm -rf src/components/_helloworld.js

Récupérez le TypeScript à partir de cette URL et enregistrez-le sous src/components/_helloworld.ts: https://raw.githubusercontent.com/PRFTAdobe/jete/main/ui.frontend/src/components/_helloworld.ts

Pour voir les résultats de ce script dans notre navigateur, nous devons inclure ce fichier dans main.ts. L’importation de splats ne fonctionnera pas sur un fichier TypeScript. On ne peut donc pas écrire : «importer ‘@/components/**/*.ts’». Au lieu de cela, nous écrirons :

import.meta.glob('@/components/**/*.ts', { eager: true });

Maintenant, allons exécutez le serveur de développement Vite.

npm run dev

Vous devriez voir ce qui suit dans Chrome Outils de développement:

Exemple Javascript Aem Vite

Très bien! Le JavaScript fonctionne également !

La section suivante est facultative, mais c’est une bonne pratique d’ajouter quelques règles de peluchage.

Installez les éléments suivants :

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser autoprefixer eslint eslint-config-airbnb-base eslint-config-airbnb-typescript eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier eslint-plugin-sort-keys eslint-plugin-typescript-sort-keys postcss postcss-dir-pseudo-class postcss-html postcss-logical prettier stylelint stylelint-config-recommended stylelint-config-standard stylelint-config-standard-scss stylelint-order stylelint-use-logical tsx

Enregistrez les URL suivantes dans ui.frontend :

https://raw.githubusercontent.com/PRFTAdobe/jete/main/ui.frontend/.eslintrc.json

https://raw.githubusercontent.com/PRFTAdobe/jete/main/ui.frontend/.postcssrc.json

https://raw.githubusercontent.com/PRFTAdobe/jete/main/ui.frontend/.prettierrc.json

https://raw.githubusercontent.com/PRFTAdobe/jete/main/ui.frontend/.stylelintrc.json

Ajoutez ce qui suit à la section « script » de package.json :

"lint": "stylelint src/**/*.scss --fix && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"

Allons essayez notre nouveau script en exécutant :

npm run lint

Vous devriez voir une bonne quantité d’erreurs de peluchage impertinente. Vous pouvez corriger les erreurs manuellement ou écraser vos versions locales avec celles du dépôt git : https://github.com/PRFTAdobe/jete/tree/main/ui.frontend/src

Nous sommes prêts à abandonner le peluchage. Travaillons sur la version AEM.

Installez les éléments suivants :

npm i -D aem-clientlib-generator aemsync

Enregistrez les URL suivantes dans ui.frontend :

https://github.com/PRFTAdobe/jete/blob/main/ui.frontend/aem-sync-push.ts

https://github.com/PRFTAdobe/jete/blob/main/ui.frontend/clientlib.config.ts

https://github.com/PRFTAdobe/jete/blob/main/ui.frontend/aem-clientlib-generator.d.ts

https://github.com/PRFTAdobe/jete/blob/main/ui.frontend/aemsync.d.ts

Les fichiers avec les extensions « d.ts » sont utilisés pour fournir des informations de type dactylographié sur les packages référencés.

Le script « clientlib.config.ts » crée une bibliothèque client basée sur les artefacts JS et CSS créés pendant le processus de construction. Il copie également les artefacts dans le répertoire « clientlib » dans « ui.apps ».

Le script « aem-sync-push.ts » prend le clientlib créé ci-dessus et le transfère vers une instance AEM en cours d’exécution.

Il est temps de mettre à jour la section « script » de package.json.

Supprimez les commandes « build » et « preview » existantes. Ajoutez les commandes suivantes :

"build": "tsc && npm run lint && vite build && tsx ./clientlib.config.ts && tsx ./aem-sync-push.ts", 

"prod": "tsc && npm run lint && vite build && tsx ./clientlib.config.ts",

Allons essayez d’abord la commande build :

npm run build

Si la commande a été exécutée avec succès, vous verrez des messages indiquant que le « générateur est terminé » et que la « synchronisation aem est terminée ». Vous remarquerez également la création d’un répertoire « dist » sous « ui.frontend ».

Notre dernière étape consiste à copier le fichier « assembly.xml » de la sauvegarde que nous avons effectuée précédemment.

cp ../JeteFrontend/assembly.xml ui.frontend/

Une fois ce fichier en place, nous sommes prêts à réexécuter la version AEM :

mvn clean install -PautoInstallSinglePackage

Toutes nos félicitations!

La construction doit être complète sans erreurs. Vous avez migré avec succès de Webpack vers Vite !

Assurez-vous de suivez notre blog Adobe pour plus de trucs et astuces sur les solutions Adobe !

Source link

Blog ARC Optimizer

juillet 16, 2024

Migrer de Webpack vers Vite / Blogs / Perficient

Présentation de Vite

Évitez les problèmes de configuration avec Vite

Projet « Jeté »

Tutoriel Migration de Webpack vers Vite

Toutes nos félicitations!

Articles similaires

Blog ARC Optimizer

Présentation de Vite

Évitez les problèmes de configuration avec Vite

Projet « Jeté »

Tutoriel Migration de Webpack vers Vite

Toutes nos félicitations!

Partager :

Articles similaires