Guide de migration : Mise à jour de la provenance des paquets npm au nouvel espace de noms @ongov

Découvrez comment mettre à jour vos projets pour référencer l’espace de noms @ongov.

Introduction

L’espace de noms npm du Système de conception pour l’Ontario a transitionné de @ontario-digital-service à @ongov. Ce changement s’inscrit dans nos efforts continus visant à améliorer l’organisation des paquets et à offrir une expérience unifiée à l’ensemble de nos développeurs. Tous les paquets publiés précédemment sous @ontario-digital-service sont maintenant disponibles sous @ongov. Ce guide décrit les étapes à suivre pour mettre à jour vos projets afin d’utiliser le nouvel espace de noms.

Paquets touchés

Tous les paquets qui auparavant étaient dans l’espace de noms @ontario-digital-service sont maintenant dans l’espace de noms @ongov. Voici les étapes à suivre :

• @ontario-digital-service/ontario-design-system-design-tokens
• @ontario-digital-service/ontario-design-system-global-styles
• @ontario-digital-service/ontario-design-system-complete-styles
• @ontario-digital-service/ontario-design-system-component-library
• @ontario-digital-service/ontario-design-system-component-library-angular
• @ontario-digital-service/ontario-design-system-component-library-react

Étapes de la migration

1. Mettre à jour les dépendances sous package.json

Vous devez mettre à jour votre fichier package.json pour qu’il corresponde au nouvel espace de noms pour toutes les dépendances touchées.

Avant 

{
    "dependencies": {
        "@ontario-digital-service/ontario-design-system-design-tokens": "^4.1.0"
    }
}

Après 

{
    "dependencies": {
        "@ongov/ontario-design-system-design-tokens": "^4.2.0"
    }
}

2. Réinstaller les paquets mis à jour

Après avoir mis à jour votre package.json, réinstallez vos dépendances pour récupérer les paquets à partir du nouvel espace de noms.

npm install

3. Mettre à jour les déclarations d’importation dans votre code

Toutes les déclarations d’importation et les références SASS qui renvoient à l’ancien espace de noms doivent être mises à jour.

Importations JavaScript/TypeScript

Avant 

import { ontario-button } from '@ontario-digital-service/ontario-design-system-component-library';

Après 

import { ontario-button } from '@ongov/ontario-design-system-component-library';

Références SASS

Si votre projet utilise SASS et renvoient à nos paquets, vous devrez mettre à jour les déclarations @use ou @forward qui comprennent l’ancien espace de noms.

Avant 

@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@forward '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/theme.scss';

Après 

@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/theme.scss';

5. Exécuter votre ensemble d’essais

Exécutez les tests de votre projet pour vous assurer que tout fonctionne comme prévu.

npm test

6. Mettre à jour les fichiers de configuration

Si vous avez des fichiers de configuration (p. ex., Webpack, Babel, ESLint) qui renvoient à l’ancien espace de noms, mettez-les à jour également.

Exemple d’alias Webpack

Avant 

alias: {
  '@ontario-digital-service': path.resolve(__dirname, 'node_modules/@ontario-digital-service')
}

Après 

alias: {
  '@ongov': path.resolve(__dirname, 'node_modules/@ongov')
}

Dépannage

• Paquets manquants : Si vous constatez des erreurs au sujet de paquets manquants, vérifiez deux fois que toutes les instances de @ontario-digital-service ont été mises à jour.

• Problèmes de mémoire cache : Essayez de vider votre cache npm : npm cache clean --force

• Modules périmés dans le répertoire node_modules : Si vous observez un comportement inattendu ou des erreurs après la mise à jour de l’espace de noms, cela peut être dû à des modules périmés dans votre dossier node_modules. La suppression du répertoire node_modules et la réinstallation de tous les paquets peuvent résoudre ces problèmes.

  rm -rf node_modules
  npm install

Comment obtenir de l’aide

Si vous avez besoin d’aide, communiquez avec nous par les canaux suivants :

• Courriel : design.system@ontario.ca
• Problèmes de GitHub : @ongov/ontario-design-system