Aller au contenu principal

Préréglages

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Les préréglages Babel permettent de partager un ensemble de plugins Babel et/ou d'options de configuration.

Préréglages officiels​

Nous avons regroupé quelques préréglages pour des environnements courants :

Autres intégrations​

Si vous n'utilisez pas Babel directement, votre framework peut fournir sa propre configuration à utiliser ou étendre. De nombreux autres préréglages maintenus par la communauté sont disponibles sur npm !

Next.js | Nuxt.js | Parcel | Jest | Gatsby

Utilisation d'un préréglage​

Dans une configuration Babel, si le préréglage est sur npm, vous pouvez passer son nom et Babel vérifiera qu'il est déjà installé dans node_modules. Ceci est ajouté à l'option presets qui accepte un tableau.

babel.config.json
{
  "presets": ["babel-preset-myPreset", "@babel/preset-env"]
}

Vous pouvez également spécifier un chemin relatif ou absolu vers vos préréglages.

babel.config.json
{
  "presets": ["./myProject/myPreset"]
}

Consultez la normalisation des noms pour plus de détails sur la configuration du chemin d'un plugin ou préréglage.

Stage-X (Préréglages expérimentaux)​

Obsolète

Depuis Babel 7, nous avons décidé de déprécier les préréglages Stage-X et de cesser leur publication. Ces propositions étant intrinsèquement sujettes à changement, il semble préférable de demander aux utilisateurs de spécifier des propositions individuelles via des plugins plutôt qu'un préréglage générique nécessitant une vérification constante. Consultez notre blog pour plus de contexte.

Les transformations des préréglages stage-x sont des modifications du langage non approuvées pour une version de JavaScript (comme ES6/ES2015).

Le TC39 classe les propositions en étapes suivantes :

  • Stage 0 - Strawman : simple idée, potentiel plugin Babel

  • Stage 1 - Proposition : mérite d'être développée

  • Stage 2 - Brouillon : spécification initiale

  • Stage 3 - Candidate : spécification complète et implémentations navigateurs initiales

  • Stage 4 - Finalisée : sera incluse dans la prochaine release annuelle

Pour plus d'informations, consultez les propositions TC39 actuelles et leur document de processus.

Le processus de stade TC39 est également expliqué en détail dans plusieurs articles de Yehuda Katz (@wycatz) sur thefeedbackloop.xyz : Stage 0 and 1, Stage 2, Stage 3

Création d'un préréglage​

Pour créer votre propre préréglage (pour une utilisation locale ou publication sur npm), vous devez exporter un objet de configuration.

Il pourrait simplement retourner un tableau de plugins..

JavaScript
module.exports = function() {
  return {
    plugins: ["pluginA", "pluginB", "pluginC"],
  };
};

Les préréglages peuvent contenir d'autres préréglages et des plugins avec options.

JavaScript
module.exports = () => ({
  presets: [require("@babel/preset-env")],
  plugins: [
    [require("@babel/plugin-transform-class-properties"), { loose: true }],
    require("@babel/plugin-transform-object-rest-spread"),
  ],
});

Pour plus d'informations, consultez la section sur les préréglages du babel handbook.

Ordre des préréglages​

L'ordre des préréglages est inversé (du dernier au premier).

babel.config.json
{
  "presets": ["a", "b", "c"]
}

S'exécutera dans l'ordre : c, b, puis a.

Cette décision visait principalement à garantir la rétrocompatibilité, car la plupart des utilisateurs listaient "es2015" avant "stage-0".

Options des préréglages​

Les plugins et préréglages peuvent tous deux avoir des options spécifiées en encapsulant le nom et un objet d'options dans un tableau dans votre configuration.

Pour spécifier aucune option, ces formulations sont équivalentes :

babel.config.json
{
  "presets": [
    "presetA", // bare string
    ["presetA"], // wrapped in array
    ["presetA", {}] // 2nd argument is an empty options object
  ]
}

Pour spécifier une option, passez un objet avec les clés correspondant aux noms des options.

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
}