Babel 6 change la façon dont il exporte les données par défaut

Question

Auparavant, babel ajoutait la ligne module.exports = exports["default"] . Il ne le fait plus. Ce que cela signifie, c'est qu'avant que je puisse le faire :

var foo = require('./foo');
// use foo

Maintenant, je dois faire ça :

var foo = require('./foo').default;
// use foo

Ce n'est pas un gros problème (et je suppose que c'est ce que cela aurait dû être depuis le début). Le problème est que j'ai beaucoup de code qui dépendait de la façon dont les choses fonctionnaient auparavant (je peux en convertir la plupart en importations ES6, mais pas toutes). Est-ce que quelqu'un peut me donner des conseils sur la façon de faire fonctionner l'ancienne méthode sans avoir à parcourir mon projet et à corriger cela (ou même des instructions sur la façon d'écrire un codemod pour le faire, ce serait assez génial).

Merci !

Exemple :

Entrée :

const foo = {}
export default foo

Sortie avec Babel 5

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;
module.exports = exports["default"];

Sortie avec Babel 6 (et plugin es2015) :

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;

Notez que la seule différence dans la sortie est le module.exports = exports["default"] .

---

Editar

Vous serez peut-être intéressé par ce billet de blog que j'ai écrit après avoir résolu mon problème spécifique : Comprendre les modules ES6, mettre à niveau Babel, des larmes et une solution

Answer 1

Si vous voulez le comportement d'exportation de CommonJS, vous devrez utiliser CommonJS directement (ou utiliser le plugin dans l'autre réponse). Ce comportement a été supprimé car il était source de confusion et conduisait à une sémantique ES6 invalide, sur laquelle certaines personnes s'étaient appuyées, par exemple

export default {
  a: 'foo'
};

et ensuite

import {a} from './foo';

qui n'est pas valide ES6 mais qui a fonctionné grâce au comportement d'interopérabilité de CommonJS que vous décrivez. Malheureusement, il n'est pas possible de supporter les deux cas, et permettre aux gens d'écrire de l'ES6 invalide est un problème plus grave que de vous faire faire de l'ES6 invalide. .default .

L'autre problème était qu'il était inattendu pour les utilisateurs d'ajouter une exportation nommée à l'avenir, par exemple

export default 4;

puis

require('./mod');
// 4

mais

export default 4;
export var foo = 5;

puis

require('./mod')
// {'default': 4, foo: 5}

Answer 2

Vous pouvez également utiliser ce plugin pour obtenir l'ancien export comportement en retour.

Answer 3

Pour les auteurs de bibliothèques, il est possible de contourner ce problème.

J'ai généralement un point d'entrée, index.js qui est le fichier vers lequel je pointe depuis le champ principal dans package.json . Il ne fait rien d'autre que de ré-exporter le point d'entrée réel de la librairie :

export { default } from "./components/MyComponent";

Pour contourner le problème de babel, j'ai changé ceci en un fichier import et ensuite assigner la valeur par défaut à module.exports :

import MyComponent from "./components/MyComponent";
module.exports = MyComponent;

Tous mes autres fichiers restent des modules ES6 purs, sans contournement. Donc seul le point d'entrée doit être légèrement modifié :)

Cela fonctionnera pour les exigences de commonjs, et aussi pour les importations ES6 car babel ne semble pas avoir abandonné l'interopérabilité inverse (commonjs -> es6). Babel injecte la fonction suivante pour corriger commonjs :

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 

J'ai passé des heures à me battre contre ce problème, alors j'espère que cela évitera à quelqu'un d'autre de faire cet effort !

Answer 4

J'ai eu ce genre de problème. Et voici ma solution :

//src/arithmetic.js

export var operations = {
  add: function (a, b) {
      return a + b;
  },

  subtract: function (a, b) {
      return a - b;
  }
};

//src/main.js

import { operations }  from './arithmetic';

let result = operations.add(1, 1);

console.log(result);