📔 Résolution de module

Le résolveur de Parcel implémente une version modifiée de l'algorithme de résolution des node_modules.

Résolution de module

En plus de l'algorithme standard, tous les types de ressources supportés par Parcel sont aussi résolus.

La résolution de module peut être relative à la :

Chemins absolus

/foo résout foo relatif à la racine de l'entrée.

Chemins du tilde ~

~/foo résout foo relatif à la racine du package le plus proche ou, s'il ne trouve pas, à la racine de l'entrée.

Chemins de fichiers glob

Les globs sont des importations génériques qui regroupent plusieurs ressources à la fois. Les globs peuvent correspondre à tout ou une partie des fichiers (/assets/*.png), ainsi qu'aux fichiers de plusieurs répertoires (/assets/**/*).

Cet exemple regroupe un répertoire de fichiers png et renvoie l’URL dist.

import foo from "/assets/*.png";
// {
//   'file-1': '/file-1.8e73c985.png',
//   'file-2': '/file-1.8e73c985.png'
// }

Le champs browser de package.json

Si un package inclut un champs package.browser, Parcel l'utilisera à la place de l'entrée package.main.

Alias

Les alias sont supportés via le champ alias dans package.json.

Ces exemples d'alias react vers preact et d'un module local personnalisé qui ne sont pas dans node_modules.

// package.json
{
  "name": "some-package",
  "devDependencies": {
    "parcel-bundler": "^1.7.0"
  },
  "alias": {
    "react": "preact-compat",
    "react-dom": "preact-compat",
    "local-module": "./custom/modules"
  }
}

Évitez d'utiliser des caractères spéciaux dans vos alias, car certains peuvent être utilisés par Parcel et d'autres par des outils ou des extensions tiers. Par exemple :

Nous vous conseillons d'être explicite lors de la définition de vos alias, veuillez donc spécifier les extensions de fichier, sinon Parcel devra le deviner. Consultez Export nommés de JavaScript pour voir un exemple.

Problèmes communs

Export nommés de JavaScript

Les cartographies d'alias s'appliquent à de nombreux types d'actifs, mais ne prennent pas spécifiquement en charge la cartographie des exports nommées de JavaScript. Si vous souhaitez cartographier les exports nommées JS, vous pouvez le faire ainsi :

// package.json
{
  "name": "some-package",
  "alias": {
    "ipcRenderer": "./electron-ipc.js" // specifiez une extension de fichier
  }
}

et réexporter l'export nommé dans le fichier aliasé :

// electron-ipc.js
module.exports = require('electron').ipcRenderer

Flow avec la résolution de chemin absolu et tilde

Lorsque vous utilisez la résolution de module de chemin absolu ou tilde, vous devez configurer Flow à l'aide de module.name_mapper.

Soit un projet avec cette structure :

package.json
.flowconfig
src/
  index.html
  index.js
  components/
    apple.js
    banana.js

src/index.html est le point d'entrée, notre racine de l'entrée est le répertoire src/.

Donc cela mappe correctement les éléments suivants :

// index.js
import Apple from '/components/apple'

Nous avons besoin que Flow remplace le chemin actuel / en '/components/apple' avec src/, cela se traduit en 'src/components/apple'.

Le paramètre suivant dans notre .flowconfig réalise ce remplacement :

[options]
module.name_mapper='^\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'

<PROJECT_ROOT> est un identifiant spécifique à Flow indiquant l'emplacement de notre .flowconfig.

REMARQUE : module.name_mapper peut avoir plusieurs entrées. Cela permet de prendre en charge la résolution du chemin Absolu ou Tilde en plus du support de l'alias du module local.

Résolution TypeScript ~

TypeScript devra connaître votre utilisation de la résolution de module ~ ou les cartographies d'alias. Veuillez vous reporter à la documentation de TypeScript Module Resolution docs pour plus d'informations.

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~*": ["./src/*"]
    }
  }
}

Résolution Monorepo

Ce sont en ce moment les utilisations conseillées avec des monorepos :

Utilisation conseillée :

Utilisation déconseillée :

Si vous êtes un utilisateur de monorepo et que vous souhaitez contribuer à ces recommandations, veuillez fournir des exemples de repos lors de l'ouverture d'issue pour aider la discussion.

Aidez-nous à améliorer la documentation

Si quelque chose manque ou n'est pas tout à fait clair, veuillez enregistrer une issue sur le dépôt du site web (en anglais) ou modifier cette page.