Bagaimana cara mengekspor objek yang diimpor di ES6?

244

Kasus penggunaannya sederhana: Saya hanya ingin mengekspor objek dengan nama seperti yang diimpor.

sebagai contoh:

import React from 'react';
export React;

tapi ini tidak berhasil. Saya harus menulis:

import React from 'react';
export const React = React;

Tapi ini aneh. Apa cara yang tepat untuk melakukan ini?

DIPERBARUI :

Terima kasih atas bantuan dan referensi. Saya telah memecahkan masalah saya dengan banyak petunjuk. Saya ingin berbagi beberapa kasus umum untuk saya dan solusinya.

ekspor impor

import d, {obj} from '...';

export {obj, d};
export {obj as name1, d as name2};

ekspor ulang semua impor yang disebutkan

export * from '...';
export * as name1 from '...';

ekspor kembali beberapa impor bernama

export {a, b as name1} from '...';

ekspor ulang impor default sebagai ekspor default

export {default} from '...';

ekspor kembali impor default sebagai ekspor bernama

export {default as name1} from '...';
import export ecmascript-6 Yao Zhao
sumber
mengapa Anda mengekspor bereaksi?
omarjmh
Anda dapat export {React}tetapi sekali lagi, jika Anda perlu Bereaksi di suatu tempat, Anda hanya perlu mengimpornya di sana.
loganfsmyth
2
Ekspor bereaksi hanyalah contoh, sebenarnya, saya ingin mengatur beberapa proyek sehingga pengguna dapat mengimpor beberapa objek di jalur tingkat yang lebih pendek dan tinggi.
Yao Zhao
Terima kasih banyak atas pembaruan itu. Ini memecahkan setiap masalah yang saya miliki dengan ES6 / 7. Saya sarankan Anda untuk menambahkan ini sebagai jawaban dan menerimanya.
Florian Wendelborn
12
export * as name1 from '...';ini tidak berfungsi untuk saya (menggunakan webpack 2). Ada ide?
Entity Black

Jawaban:

131

Saya sering melakukan hal berikut dalam file index.js yang menyusun beberapa file:

export {default as SomeClass} from './SomeClass';
export {someFunction} from './utils';
export {default as React} from 'react';

Entri blog ini memberikan beberapa contoh tambahan yang bagus.

Catatan penting

Anda harus mengetahui aturan eslint ini ketika mengakses impor yang diekspor ini. Pada dasarnya, di file lain, Anda tidak boleh:

import SomeClassModule from 'SomeClass/index.js';
SomeClassModule.someFunction(); // Oops, error

Anda harus melakukan ini:

import SomeClassModule, {someFunction} from 'SomeClass/index.js';
someFunction(); // Ok
Eric H.
sumber
36

Anda dapat mengekspor file yang diimpor dengan struktur seperti itu

import First from './First'
import Second from './Second'
/..../
export { First, Second }
Igor Dolzhenkov
sumber
2

Untuk kasus penggunaan saya, saya secara eksplisit memerlukan semacam pernyataan impor eksplisit sehingga babel dapat mengubah kode es7 saya ke es5.

Berikut ini menghasilkan kesalahan You gave us a visitor for the node type "ForAwaitStatement" but it's not a valid type:

require( 'babel-core/register' ); //transpiles es7 to es5
export {default} from './module_name'

Solusi saya adalah mengimpor modul secara eksplisit dengan menggunakan require():

require( 'babel-core/register' );
export default require( './module_name' ).default;
Kacy
sumber
-1

Diberikan ./foo.js:

const Foo = class {
  talk() { return 'hello'; }
};

export default Foo;

Maka Anda harus dapat melakukan ini:

import Foo from './foo';

let foo = new Foo();

foo.talk(); // => 'hello';

Sintaksis kurang lebih mengikuti pola commonjs module.exports, di mana Anda akan melakukan ini:

const Foo = class {

};

module.exports = Foo;

Lebih banyak di sini:

http://exploringjs.com/es6/ch_modules.html

Apodaca kaya
sumber
Bukan itu pertanyaannya?
Dan Dascalescu