Ekspor beberapa kelas dalam modul ES6


150

Saya mencoba membuat modul yang mengekspor beberapa kelas ES6. Katakanlah saya memiliki struktur direktori berikut:

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

Foo.jsdan Bar.jsmasing - masing mengekspor kelas ES6 default:

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

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

Saat ini saya sudah index.jsmenyiapkan saya seperti ini:

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

export default {
  Foo,
  Bar,
}

Namun, saya tidak dapat mengimpor. Saya ingin dapat melakukan ini, tetapi kelas tidak ditemukan:

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

Apa cara yang benar untuk mengekspor beberapa kelas dalam modul ES6?


5
gunakan saja exporttanpa default
webdeb

Anda hanya dapat memiliki satu defaultekspor. Bayangkan jika seseorang mencoba melakukannya import SomeClass from 'my/module'. Ini secara otomatis akan mengimpor defaultmodul dari jalur itu. Jika Anda memiliki beberapa ekspor default di sana, bagaimana ia tahu mana yang akan diimpor?
saadq

Jawaban:


258

Coba ini di kode Anda:

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

// without default
export {
  Foo,
  Bar,
}

Btw, Anda juga bisa melakukannya dengan cara ini:

// 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'

Menggunakan 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';

Perbedaannya export defaultadalah Anda dapat mengekspor sesuatu, dan menerapkan nama tempat Anda mengimpornya:

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

// import it
import User from './user'

Saya mendapatkan Unexpected tokenkesalahan saat membangunexport Foo from './Foo'; export Bar from './Bar'
inostia

@inostia note, ini adalah sintaks ES6, Anda mungkin perlu "babel" untuk mendukungnya
webdeb

Saya menggunakan babel. Saya mendapat kesalahan itu saat kompilasi dengan webpack. Saya pikir saya perlu melakukan sesuatu seperti export { default as Foo } from './Foo';. Saya pernah melihatnya di tempat lain
inostia

@inostia Saya juga mengalami ini, export { default as Foo } from './Foo';diharuskan untuk benar-benar mengekspornya.
echolocation

17

Semoga ini membantu:

// 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();

7

@ webdeb menjawab tidak bekerja untuk saya, saya menemukan unexpected tokenkesalahan ketika mengkompilasi ES6 dengan Babel, melakukan ekspor bernama default.

Namun ini berhasil bagi saya:

// 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'

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';

-2

Untuk mengekspor instance kelas Anda dapat menggunakan sintaks ini:

// 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();

4
ini bukan ES6 Syntax
GerDner
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.