web-dev-qa-db-fra.com

Module.exports et import es6

Réagissez avec babel. J'ai cette confusion avec les importations et module.exports. Je suppose que babel lors de la conversion du code ES6 en ES5 convertit les importations et les exportations en require et module.exports respectivement.

Si j'exporte une fonction d'un module et que j'importe la fonction dans un autre module, le code s'exécute correctement. Mais si j'exporte la fonction avec module.exports et l'importe en utilisant "import", l'erreur est lancée au moment de l'exécution en disant que ce n'est pas une fonction.

J'ai concocté un exemple.

// Tiger.js
function Tiger() {
    function roar(terrian){
        console.log('Hey i am in ' +  terrian + ' and i am roaing');
    };
    return roar;
}

module.exports = Tiger;

// animal.js
import { Tiger } from './animals';

var animal = Tiger();
animal("jungle");

J'ai utilisé babel avec le préréglage es2015 pour le transcompiler. Cela me donne l'erreur suivante

TypeError non capturé: (0, _animals.Tiger) n'est pas une fonction

Mais si je supprime le module.exports = Tiger; Et remplacez-le par export { Tiger }; Ça fonctionne bien.

Qu'est-ce que j'oublie ici??

EDIT: J'utilise browserify comme bundler de module.

babeljses6-module-loader
21
Nani

export { Tiger } serait équivalent à module.exports.Tiger = Tiger. Inversement, module.exports = Tiger serait équivalent à export default Tiger. Ainsi, lorsque vous utilisez module.exports = Tiger puis essayez import { Tiger } from './animals' vous demandez effectivement Tiger.Tiger.

25
Matt Molnar

Si vous souhaitez importer:

module.exports = Tiger

vous pouvez utiliser la construction suivante:

import * as Tiger from './animals'

Ensuite, cela fonctionnera.

Une autre option consiste à modifier l'exportation comme décrit par @Matt Molnar, mais cela n'est possible que si vous êtes l'auteur du code importé.

16
jmarceli

Pour moi, j'essaie d'appliquer cela à un webpack.config.ts. Ce qui précède ne fonctionne pas import * as X from "./X"; J'ai une autre erreur.

Module.exports avec import es6 pour webpack.config.ts en TypeScript

enter image description here

const getConfig = ( appDir: string, distDir: string, env: any, args: any ): webpack.Configuration => {
    const config: webpack.Configuration = {
        return config;
    };
};

module.exports = getConfig;
0
Sigex