Comment obtenir la valeur de retour de « Export Default » lors de l'importation ?

Question

Simplement, j'ai un fichier js dont les valeurs par défaut d'exportation renvoient un objet.

// x.js
exporter par défaut ()=>({
  texte : 'texte'
})
≪/pré>
Je souhaite l'importer dans un autre fichier js et le fusionner avec ses données (en quelque sorte l'étendre).
Maintenant, je fais ceci : 
// y.js
importer x depuis './x.js' ;
const obj = x()
exporter par défaut ()=>({
  ...obj,
  texte2 : "texte2"
})
≪/pré>
Ça marche, mais ce n'est pas propre. Existe-t-il un moyen plus simple de procéder ? 

Answer 1

Je me suis dit : « Je veux utiliser une approche propre », une approche facile à comprendre. Par conséquent, ce qui suit peut fonctionner -

<强>1. Exportation par défaut-
Ceci est utile pour exporter un seul objet, fonction ou variable. Pendant le processus d'importation, nous pouvons importer sous n'importe quel nom.

// x.js
export default function xFunc() {
    return { text: "text" };
}

//y.js
import xFunc from "./x.js";
export default function yFunc() {
    return {
        ...xFunc(),
        text2: "text2",
    };
}

// import y in any file
import yFunc from "./y";
console.log(yFunc());

L'exportation par défaut peut également être utilisée comme ceci-
Ceci est utile car nous pouvons utiliser n'importe quel nom pour nous amuser puisqu'il s'agit de l'exportation par défaut avec un nom (afin que nous puissions nous souvenir du nom) et de l'importation avec n'importe quel nom.

// x.js
function xFunc() {
  return { text: "text" };
}
export { xFunc as default };

// y.js
import anyName from "./x.js";
function yFunc() {
  return {
    ...anyName(),
    text2: "text2",
  };
}
export { yFunc as default };

// import y in any file
import anyName from "./y";
console.log(anyName());

<强>2. Exportation nommée (recommandée)-
Ceci est utile pour exporter plusieurs valeurs. Lors du processus d'importation, le même nom doit être utilisé pour éviter toute confusion entre les noms d'exportation et d'importation.

// x.js
export const xFunc = () => { text: "text" };

//y.js
import { xFunc } from "./x.js";
export const yFunc = () => {
  return {
    ...xFunc(),
    text2: "text2",
  };
};

// import y in any file
import { yFunc } from "./y";
console.log(yFunc());

Modifier--

Les exportations nommées peuvent également être utilisées comme ceci (sans utiliser les fonctions const et arrow)

// x.js
function xFunc() {
  return { text: "text" };
}
export { xFunc };

//y.js
import { xFunc } from "./x.js";
function yFunc() {
  return {
    ...xFunc(),
    text2: "text2",
  };
}
export { yFunc };

// import y in any file
import { yFunc } from "./y";
console.log(yFunc());