Apa itu "standar ekspor" dalam javascript?

570

File: SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;

Saya belum pernah melihat export defaultsebelumnya. Apakah ada hal yang setara untuk export defaultitu yang lebih mudah dimengerti?

damphat
sumber
29
Ini adalah penjelasan yang sangat jelas pada 24ways.org/2014/javascript-modules-the-es6-way
nish1013
2
exportdetail kata kunci di sini . Saat ini tidak didukung secara native oleh browser web mana pun.
RBT
3
Sekarang didukung di semua browser kecuali IE.
Brian Di Palma
1
Jawaban yang sangat bagus stackoverflow.com/a/36426988/5473170
Suraj Jain
Lihatlah, lihat di atas untuk jawaban; lihat \ / di bawah ini untuk kebingungan. Saya telah menunjukkan u da wai
Andrew

Jawaban:

456

Itu bagian dari sistem modul ES6, dijelaskan di sini . Ada contoh bermanfaat dalam dokumentasi itu, juga:

Jika modul mendefinisikan ekspor standar:

export default function() { console.log("hello!") }

maka Anda dapat mengimpor ekspor default itu dengan menghilangkan kurung kurawal:

import foo from "foo";
foo(); // hello!

Pembaruan: Pada Juni 2015, sistem modul didefinisikan dalam §15.2 dan exportsintaksis secara khusus didefinisikan dalam §15.2.3 dari spesifikasi ECMAScript 2015.

pswg
sumber
1
@ GeenHenk Saya kira itu yang diharapkan karena ES6 masih konsep. Saya telah menyediakan tautan yang diperbarui dan penafian.
pswg
7
Saya tidak melihat bagaimana fungsi default ekspor () {} berbeda dengan export = function () {} ....
Alexander Mills
1
bagaimana dengan kasus-kasus di mana rasanya export const Foo = () => {}dan kemudian pada akhir file export default Foosaya melihat ini di banyak contoh reaksi. Ada apa dengan dua ekspor?
FlavourScape
Akan menyenangkan untuk melihat contoh dengan ekspor default dan bernama. Dengan kata lain, ekspor seperti itu akan memuaskanimport foo, { bar, baz } from './foo';
gumkins
1
Terima kasih telah menjawab, tetapi penggunaan foo pada contoh kedua agak ambigu; apa foo dan bagaimana Anda memberi nama file pertama; kenapa bisa kamu lakukan import foo from "foo"? Apakah ada objek yang menahan foo, karena pada contoh pertama fungsi yang diekspor tidak disebutkan namanya. @pswg
nosahama
159

export default digunakan untuk mengekspor satu kelas, fungsi atau primitif dari file skrip.

Ekspor juga dapat ditulis sebagai

export default function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

Ini digunakan untuk mengimpor fungsi ini dalam file skrip lain

Katakan di app.js , Anda bisa

import SafeString from './handlebars/safe-string';

Sedikit tentang ekspor

Seperti namanya, ini digunakan untuk mengekspor fungsi, objek, kelas atau ekspresi dari file skrip atau modul

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

Ini dapat diimpor dan digunakan sebagai

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

Atau

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

Ketika standar ekspor digunakan, ini jauh lebih sederhana. File skrip hanya mengekspor satu hal. cube.js

export default function cube(x) {
  return x * x * x;
};

dan digunakan sebagai App.js

import Cube from 'cube';
console.log(Cube(3)); // 27
sudo bangbang
sumber
78

export default function(){}dapat digunakan saat fungsi tidak memiliki nama. Hanya ada satu ekspor standar dalam file. Alternatifnya adalah ekspor bernama.

Halaman ini menjelaskan export defaultsecara mendetail serta perincian lainnya tentang modul yang menurut saya sangat membantu.

Greg Gum
sumber
14
Anda dapat menggunakan ekspor default dan bernama bersama jika Anda mau.
Bergi
@Greg gum halaman sudah kedaluwarsa. Ini mengarahkan ke exploringjs.com/es6/ch_modules.html
rajakvk
@rajakvk, Benar, tetapi halaman asli memiliki lebih banyak informasi latar belakang untuk mereka yang memulai.
Greg Gum
7
Jawaban ini lebih baik daripada yang diterima karena ini menjelaskan apa defaultartinya dan bagi saya pertanyaannya adalah tentang kata ini.
Dariusz Sikorski
1
@DariuszSikorski jawaban yang diterima menjelaskan apa defaultartinya, karena ekspor default dapat diimpor tanpa menggunakan kawat gigi. Jawaban ini sebenarnya sangat salah karena dikatakan Anda hanya dapat menggunakan defaultketika hanya ada satu ekspor dalam file, yang tidak benar sama sekali. Anda dapat memiliki beberapa ekspor dalam file yang sama, tetapi tentu saja hanya 1 yang dapat ditetapkan sebagai defaultsatu.
realUser404
43

Saya menulis posting ini karena (saya menganggap saya lelah) saya tidak mengerti atau MDN, atau deskripsi orang lain dan cara terbaik untuk memahami sesuatu adalah dengan mengajarkannya kepada orang lain. Hanya saja saya tidak melihat jawaban sederhana dari pertanyaan itu.

Apa itu "standar ekspor" dalam javascript?

Dalam ekspor default, penamaan impor sepenuhnya independen dan kami dapat menggunakan nama apa pun yang kami suka.

Saya akan menggambarkan garis ini dengan contoh sederhana.

Katakanlah kita memiliki 3 modul dan index.html:

  • modul.js
  • modul2.js
  • modul3.js
  • index.html

modul.js

export function hello() {
    console.log("Modul: Saying hello!");
}

export let variable = 123;

modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; //! Here is the important stuff - we name the variable for the module as we like

mod.hello();
console.log("Module: " + mod.variable);

hello2();
console.log("Module2: " + variable2);

blabla();
</script>

Outputnya adalah:

modul.js:2:10   -> Modul: Saying hello! 
index.html:7:9  -> Module: 123 
modul2.js:2:10  -> Module2: Saying hello for the second time! 
index.html:10:9 -> Module2: 456 
modul3.js:2:10  -> Module3: Saying hello for the third time!

Jadi penjelasan yang lebih panjang adalah :

'export default' digunakan jika Anda ingin mengekspor satu hal untuk sebuah modul.

Jadi hal yang penting adalah "impor blabla dari './modul3.js'" - kita bisa mengatakan sebaliknya:

"impor pamelanderson dari './modul3.js" dan kemudian pamelanderson (); Ini akan berfungsi dengan baik ketika kita menggunakan 'default ekspor' dan pada dasarnya ini dia - memungkinkan kita untuk menamainya apa pun yang kita suka ketika itu default .


Ps Jika Anda ingin menguji contoh - membuat file terlebih dahulu, maka izinkan CORS di browser -> jika Anda menggunakan tipe firefox di url browser: about: config -> Search for "privacy.file_unique_origin" -> ubah ke "false" -> open index.html -> tekan F12 untuk membuka konsol dan lihat hasilnya -> Nikmati dan jangan lupa untuk mengembalikan pengaturan kors ke default.

Ps2 Maaf untuk penamaan variabel konyol

Info lebih lanjut @ link2medium , link2mdn1 , link2mdn2

Menggabungkan
sumber
4
Ini harus diterima sebagai jawaban terbaik tetapi saya melakukan apa yang saya bisa menggunakan upvote saya.
Jarmos
1
Terima kasih banyak!
Gabungkan
1
Ini harus menjadi jawaban yang diterima dengan tangan
terangkat
16

Seperti yang dijelaskan di halaman MDN ini

Ada dua jenis ekspor, bernama dan default. Anda dapat memiliki beberapa ekspor bernama per modul tetapi hanya satu ekspor standar [...] Ekspor yang dinamai berguna untuk mengekspor beberapa nilai. Selama impor, itu wajib untuk menggunakan nama yang sama dari objek yang sesuai. Tapi ekspor standar dapat diimpor dengan nama apa pun

Sebagai contoh:

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123
manfall19
sumber
6

Menurut pendapat saya yang penting tentang ekspor default adalah, bahwa BISA diimpor dengan nama APAPUN!

jika ada file foo.js yang mengekspor default:

export default function foo(){}

itu dapat diimpor di bar.js menggunakan:

import bar from 'foo'
import Bar from 'foo' //or ANY other name you wish to assign to this import

Pauls Bebris
sumber
1

Ada dua jenis ekspor, bernama dan default . Anda dapat memiliki beberapa ekspor bernama per modul tetapi hanya satu ekspor standar. Setiap jenis sesuai dengan salah satu di atas. Sumber: MDN

Ekspor Bernama

export class NamedExport1 { }

export class NamedExport2 { }

// import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

Ekspor Default

export default class DefaultExport1 { }

// import class
import DefaultExport1 from 'path-to-file' // no curly braces {}

// Anda dapat menggunakan nama yang berbeda untuk impor default

import Foo from 'path-to-file' // this will assign any default export to Foo.
Pemenang
sumber
-3

standar ekspor digunakan untuk mengekspor satu kelas, fungsi atau primitif.

ekspor fungsi default () {} dapat digunakan ketika fungsi tidak memiliki nama. Hanya ada satu ekspor standar dalam file.

Baca lebih banyak

Viju
sumber