web-dev-qa-db-fra.com

Babel 6 change la manière dont il exporte les défauts

Auparavant, babel ajoutait la ligne module.exports = exports["default"]. Ce n'est plus ça. Qu'est-ce que cela signifie, c'est avant que je puisse faire:

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

Maintenant je dois faire ceci:

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

Pas un gros problème (et je suppose que c’est ce qu’il aurait dû être depuis le début). Le problème est que j'ai beaucoup de code qui dépend de la façon dont les choses fonctionnaient auparavant (je peux convertir la plupart d’entre elles en importations ES6, mais pas toutes). Quelqu'un peut-il me donner des conseils sur la façon de faire fonctionner l'ancienne méthode sans avoir à passer en revue mon projet et à corriger cela (ou même quelques instructions sur la façon d'écrire un codemod pour le faire serait assez compliqué).

Merci!

Exemple:

Contribution:

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"].

Modifier

Vous pouvez être intéressé par cet article que j'ai écrit après avoir résolu mon problème spécifique: Incompréhension des modules ES6, mise à niveau de Babel, larmes et solution

ecmascript-6commonjsbabeljs
192
kentcdodds

Vous pouvez également utiliser this plugin pour récupérer l'ancien comportement export.

89
SimenB

Si vous souhaitez un comportement d'exportation CommonJS, vous devez utiliser CommonJS directement (ou utiliser le plug-in dans l'autre réponse). Ce comportement a été supprimé car il était source de confusion et conduisait à une sémantique ES6 non valide, sur laquelle certaines personnes s’appuyaient, par exemple.

export default {
  a: 'foo'
};

puis

import {a} from './foo';

qui est invalide ES6 mais a fonctionné en raison du comportement d’interopérabilité CommonJS que vous décrivez. Malheureusement, il n'est pas possible de prendre en charge les deux cas, et permettre aux utilisateurs d'écrire ES6 non valide est un problème plus grave que de vous obliger à faire .default.

L’autre problème était qu’il était inattendu pour les utilisateurs d’ajouter ultérieurement une exportation nommée, par exemple

export default 4;

ensuite

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

mais

export default 4;
export var foo = 5;

ensuite

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

Pour les auteurs de bibliothèques, vous pourrez peut-être contourner ce problème.

J'ai généralement un point d'entrée, index.js, qui correspond au fichier que je pointe du champ principal dans package.json. Il ne fait rien d'autre que réexporter le point d'entrée actuel de la bibliothèque:

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

Pour contourner le problème de babel, j'ai changé cela en une instruction import, puis j'ai attribué la valeur par défaut à module.exports:

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

Tous mes autres fichiers restent en tant que modules ES6 purs, sans solutions de rechange. Donc, seul le point d'entrée a besoin d'un changement légèrement :)

Cela fonctionnera pour les besoins communs, ainsi que pour les importations ES6, car babel ne semble pas avoir abandonné l'interopérabilité inverse (commonjs -> es6). Babel injecte la fonction suivante pour corriger les points communs:

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

J'ai passé des heures à lutter contre cela, alors j'espère que cela sauvera l'effort de quelqu'un d'autre!

33
WickyNilliams

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);
1
Ihor Pavlyk