export defaultSadece yaparak ithal edebilmek dışında, bu ikisi arasında büyük farklılıklar olup olmadığını belirlemeye çalışıyorum :

import myItem from 'myItem';

Ve kullanarak export constyapabilirim:

import { myItem } from 'myItem';

Bunun dışında herhangi bir farklılık ve / veya kullanım örneği olup olmadığını merak ediyorum.

Varsayılan bir dışa aktarmaya karşılık adlandırılmış bir dışa aktarmadır. export constbir const beyanı veya beyanı ihraç eden adlandırılmış bir ihracattır.

Vurgulamak gerekirse: Burada önemli olan , bir sabit beyan veya beyan beyan etmek için kullanılan exportanahtar kelimedir const.exportsınıf veya işlev bildirimleri gibi diğer bildirimlere de uygulanabilir.

Varsayılan Dışa Aktarma (export default )

Dosya başına bir varsayılan dışa aktarma yapabilirsiniz. İçe aktardığınızda bir ad belirtmeniz ve şu şekilde içe aktarmanız gerekir:

import MyDefaultExport from "./MyFileWithADefaultExport";

Buna istediğiniz ismi verebilirsiniz.

Adlandırılmış Dışa Aktarma ( export)

Adlandırılmış dışa aktarmalarda, dosya başına birden çok adlandırılmış dışa aktarma işlemine sahip olabilirsiniz. Ardından, parantez içinde çevrili olmasını istediğiniz özel ihracatları içe aktarın:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

Veya aynı ifadede adlandırılmış içe aktarmalarla birlikte bir varsayılan değer kullanmak mümkündür:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

Ad Alanı İçe Aktarma

Bir nesnedeki dosyadan her şeyi içe aktarmak da mümkündür:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

notlar

• Sözdizimi, varsayılan dışa aktarmaları biraz daha özlü olarak kullanmaktadır, çünkü kullanım durumları daha yaygındır ( Buradaki tartışmaya bakın) ).

• Varsayılan dışa aktarma aslında adıyla adlandırılmış bir dışa aktarmadır, defaultböylece adlandırılmış bir içe aktarmayla içe aktarabilirsiniz:

  import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

export defaultdışa aktarılan "şey" i içe aktarırken söz konusu sözdizimini etkiler, içe aktarmaya izin verilirken, dışa aktarılan her ne olursa olsun, dışa aktarma sırasındaki ad importne olursa olsun, yalnızca "varsayılan" olarak işaretlendiğinden , kendi içindeki adı seçerek .

Sevdiğim (ve kullandığım) kullanışlı bir kullanım durumu, anonim bir işlevi açıkça adlandırmak zorunda kalmadan dışa aktarmaya izin vermektir ve yalnızca bu işlev içe aktarıldığında bir ad verilmelidir:

Misal:

Dışa aktarma 2 işlevleri, biri default:

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

Yukarıdaki işlevleri içe aktarın. Bunun için bir isim oluşturmak default:

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

Ne zaman {}sözdizimi bir işlev (veya değişken) almak için kullanılır o edildi ithal ne olursa olsun anlamına gelir zaten dışa aktarıldığında teker içe olmalı, böylece adlı kesin olmaz eser başka ithalat aynı adı ya.

Hatalı Örnekler:

1. Varsayılan işlev içe aktarılmadan önce olmalıdır

   import {divide}, square from './module_1.js

2. divide_1ihraç edilmedi module_1.js, hiçbir şey ithal edilmeyecek

   import {divide_1} from './module_1.js

3. squaredışa aktarılmadı module_1.js, çünkü {}motora yalnızca adlandırılmış dışa aktarmaları açıkça aramasını söyler .

   import {square} from './module_1.js

Küçük not: Varsayılan bir dışa aktarmadan içe aktardığınızda, adlandırma işleminin tamamen bağımsız olduğunu lütfen unutmayın. Bunun aslında yeniden düzenleme işlemleri üzerinde etkisi vardır.

Diyelim ki Fookarşılık gelen bir içe aktarma ile böyle bir sınıfınız var :

export default class Foo { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export
import Foo from './Foo'

Şimdi Foosınıfınızı Baryeniden düzenleyip dosyayı yeniden adlandırırsanız, çoğu IDE içe aktarma işleminize dokunmaz. Böylece bununla sonuçlanacaksınız:

export default class Bar { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export.
import Foo from './Bar'

Özellikle Daktilo'da, adlandırılmış ihracatı ve daha güvenilir yeniden düzenlemeyi gerçekten takdir ediyorum. Aradaki fark sadece defaultanahtar kelimenin ve süslü parantezlerin olmamasıdır . Bu btw, şimdi tür denetlemeniz olduğundan içe aktarma işleminizde yazım hatası yapmanızı da önler.

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'

Gönderen belgeler :

Adlandırılmış dışa aktarmalar, birkaç değeri dışa aktarmak için kullanışlıdır. İçe aktarma sırasında, ilgili değere atıfta bulunmak için aynı adı kullanabilirsiniz.

Varsayılan dışa aktarma ile ilgili olarak, modül başına yalnızca tek bir varsayılan dışa aktarma vardır. Varsayılan dışa aktarma bir işlev, bir sınıf, bir nesne veya başka bir şey olabilir. Bu değer, içe aktarılması en kolay olacağı için "ana" dışa aktarılan değer olarak kabul edilmelidir.

Varsayılan koyduğunuzda buna varsayılan dışa aktarma denir. Dosya başına yalnızca bir varsayılan dışa aktarma yapabilirsiniz ve bunu istediğiniz herhangi bir adla başka bir dosyaya aktarabilirsiniz. Varsayılan olarak adlandırılan dışa aktarma adını koymadığınızda, içindeki süslü parantezlerle aynı adı kullanarak başka bir dosyaya içe aktarmanız gerekir.

Tarayıcının es6 kullanmaması sorunu yaşadım.

Ben düzeltmek var:

 <script type="module" src="index.js"></script>

Tür modülü tarayıcıya ES6'yı kullanmasını söyler.

export const bla = [1,2,3];

import {bla} from './example.js';

O zaman işe yaramalı.