Exporter plusieurs classes dans les modules ES6

150

J'essaye de créer un module qui exporte plusieurs classes ES6. Disons que j'ai la structure de répertoires suivante:

my/
└── module/
    ├── Foo.js
    ├── Bar.js
    └── index.js

Foo.jset Bar.jschacun exporte une classe ES6 par défaut:

// Foo.js
export default class Foo {
  // class definition
}

// Bar.js
export default class Bar {
  // class definition
}

J'ai actuellement ma index.jsconfiguration comme ceci:

import Foo from './Foo';
import Bar from './Bar';

export default {
  Foo,
  Bar,
}

Cependant, je ne peux pas importer. Je veux pouvoir le faire, mais les classes ne sont pas trouvées:

import {Foo, Bar} from 'my/module';

Quelle est la bonne façon d'exporter plusieurs classes dans un module ES6?

ambiant
la source
5
utilisez simplement exportsans la valeur par défaut
webdeb
Vous ne pouvez avoir qu'une seule defaultexportation. Imaginez si quelqu'un essayait de le faire import SomeClass from 'my/module'. Cela importerait automatiquement le defaultmodule à partir de ce chemin. Si vous y aviez plusieurs exportations par défaut, comment savoir laquelle importer?
saadq

Réponses:

258

Essayez ceci dans votre code:

import Foo from './Foo';
import Bar from './Bar';

// without default
export {
  Foo,
  Bar,
}

Btw, vous pouvez également le faire de cette façon:

// bundle.js
export { default as Foo } from './Foo'
export { default as Bar } from './Bar'
export { default } from './Baz'

// and import somewhere..
import Baz, { Foo, Bar } from './bundle'

En utilisant export

export const MyFunction = () => {}
export const MyFunction2 = () => {}

const Var = 1;
const Var2 = 2;

export {
   Var,
   Var2,
}


// Then import it this way
import {
  MyFunction,
  MyFunction2,
  Var,
  Var2,
} from './foo-bar-baz';

La différence avec export defaultest que vous pouvez exporter quelque chose et appliquer le nom là où vous l'importez:

// export default
export default class UserClass {
  constructor() {}
};

// import it
import User from './user'
webdeb
la source
Je reçois une Unexpected tokenerreur lors de la constructionexport Foo from './Foo'; export Bar from './Bar'
inostia
@inostia note, il s'agit de la syntaxe ES6, vous avez probablement besoin de "babel" pour la prendre en charge
webdeb
J'utilise babel. J'ai eu cette erreur lors de la compilation avec webpack. Je pense que je dois faire quelque chose comme export { default as Foo } from './Foo';. J'ai vu ça ailleurs
inostia
@inostia Je suis également en train de vivre cela, export { default as Foo } from './Foo';il fallait l'exporter.
écholocation
17

J'espère que cela t'aides:

// Export (file name: my-functions.js)
export const MyFunction1 = () => {}
export const MyFunction2 = () => {}
export const MyFunction3 = () => {}

// if using `eslint` (airbnb) then you will see warning, so do this:
const MyFunction1 = () => {}
const MyFunction2 = () => {}
const MyFunction3 = () => {}

export {MyFunction1, MyFunction2, MyFunction3};

// Import
import * as myFns from "./my-functions";

myFns.MyFunction1();
myFns.MyFunction2();
myFns.MyFunction3();


// OR Import it as Destructured
import { MyFunction1, MyFunction2, MyFunction3 } from "./my-functions";

// AND you can use it like below with brackets (Parentheses) if it's a function 
// AND without brackets if it's not function (eg. variables, Objects or Arrays)  
MyFunction1();
MyFunction2();
Syed
la source
7

La réponse de @ webdeb n'a pas fonctionné pour moi, j'ai rencontré une unexpected tokenerreur lors de la compilation d'ES6 avec Babel, en effectuant des exportations nommées par défaut.

Cela a fonctionné pour moi, cependant:

// Foo.js
export default Foo
...

// bundle.js
export { default as Foo } from './Foo'
export { default as Bar } from './Bar'
...

// and import somewhere..
import { Foo, Bar } from './bundle'
Inostia
la source
3
// export in index.js
export { default as Foo } from './Foo';
export { default as Bar } from './Bar';

// then import both
import { Foo, Bar } from 'my/module';
PaoPao
la source
-2

Pour exporter les instances des classes, vous pouvez utiliser cette syntaxe:

// export index.js
const Foo = require('./my/module/foo');
const Bar = require('./my/module/bar');

module.exports = {
    Foo : new Foo(),
    Bar : new Bar()
};

// import and run method
const {Foo,Bar} = require('module_name');
Foo.test();
Schmidko
la source
4
ce n'est pas la syntaxe ES6
GerDner