web-dev-qa-db-fra.com

Comment utiliser correctement ES6 "export par défaut" avec CommonJS "require"?

J'ai travaillé sur tutoriel Webpack . Dans l'une des sections, il donne l'exemple de code qui contient une ligne essentielle à cette question:

export default class Button { /* class code here */ }

Dans la section suivante dudit didacticiel, intitulée "Code splitting", la classe définie ci-dessus est chargée à la demande, comme ceci:

require.ensure([], () => {
    const Button = require("./Components/Button");
    const button = new Button("google.com");
    // ...
});

Malheureusement, ce code lève une exception:

Uncaught TypeError: Button is not a function

Maintenant, je sais que la manière à droite d'inclure le module ES6 serait de simplement import Button from './Components/Button'; En haut du fichier, mais en utilisant une construction comme celle-ci n'importe où ailleurs dans le fichier, cela fait babel un panda triste:

SyntaxError: index.js: 'import' and 'export' may only appear at the top level

Après quelques manipulations avec l'exemple précédent (require.ensure()) ci-dessus, je me suis rendu compte que la syntaxe ES6 export default Exporte un objet qui a une propriété nommée default, qui contient mon code (le Button fonction).

J'ai corrigé l'exemple de code cassé en ajoutant .default Après un appel requis, comme ceci:

const Button = require("./Components/Button").default;

... mais je pense que cela semble un peu maladroit et il est sujet aux erreurs (il faudrait que je sache quel module utilise la syntaxe ES6 et lequel utilise le bon vieux module.exports).

Ce qui m'amène à ma question: quelle est la bonne façon d'importer du code ES6 à partir de code qui utilise la syntaxe CommonJS?

javascriptecmascript-6webpackcommonjses6-module-loader
27
mr.b

Pour utiliser export default Avec Babel, vous pouvez effectuer 1 des opérations suivantes:

  1. require("myStuff").default
  2. npm install babel-plugin-add-module-exports --save-dev

Ou 3:

//myStuff.js
var thingToExport = {};
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = thingToExport;
20
Cooper Buckingham