Aller au contenu principal

@babel/plugin-transform-computed-properties

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 →

info

Ce plugin est inclus dans @babel/preset-env

Exemple​

Entrée

JavaScript
var obj = {
  ["x" + foo]: "heh",
  ["y" + bar]: "noo",
  foo: "foo",
  bar: "bar",
};

Sortie

JavaScript
var _obj;

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true,
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

var obj = ((_obj = {}),
_defineProperty(_obj, "x" + foo, "heh"),
_defineProperty(_obj, "y" + bar, "noo"),
_defineProperty(_obj, "foo", "foo"),
_defineProperty(_obj, "bar", "bar"),
_obj);

Installation​

npm install --save-dev @babel/plugin-transform-computed-properties

Utilisation​

Avec un fichier de configuration (Recommandé)​

Sans options :

babel.config.json
{
  "plugins": ["@babel/plugin-transform-computed-properties"]
}

Avec options :

babel.config.json
{
  "plugins": [
    [
      "@babel/plugin-transform-computed-properties",
      {
        "loose": true
      }
    ]
  ]
}

Via CLI​

Shell
babel --plugins @babel/plugin-transform-computed-properties script.js

Via l'API Node​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-computed-properties"],
});

Options​

loose​

boolean, valeur par défaut : false

Tout comme l'assignation de méthode dans les classes, en mode loose, les noms de propriétés calculées utilisent des assignations simples plutôt que d'être définies. Cela ne devrait pas poser problème dans du code de production.

attention

Envisagez de migrer vers l'hypothèse de haut niveau setComputedProperties.

babel.config.json
{
  "assumptions": {
    "setComputedProperties": true
  }
}

Exemple​

Entrée

JavaScript
var obj = {
  ["x" + foo]: "heh",
  ["y" + bar]: "noo",
  foo: "foo",
  bar: "bar",
};

Sortie

Lorsque setComputedProperties est true.

JavaScript
var _obj;

var obj = ((_obj = {}),
(_obj["x" + foo] = "heh"),
(_obj["y" + bar] = "noo"),
(_obj.foo = "foo"),
(_obj.bar = "bar"),
_obj);

Lorsque setComputedProperties est false.

JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";

var _obj;

var obj = ((_obj = {}),
_defineProperty(_obj, "x" + foo, "heh"),
_defineProperty(_obj, "y" + bar, "noo"),
_defineProperty(_obj, "foo", "foo"),
_defineProperty(_obj, "bar", "bar"),
_obj);
astuce

Vous pouvez en savoir plus sur la configuration des options de plugin ici