ES6 içe aktarma için ne zaman süslü parantez kullanmalıyım?

Görünüşe göre, ES6'da tek bir modülü içe aktarmak için kıvırcık parantezlerin ne zaman kullanılacağı konusunda kendimi biraz karışık buldum. Örneğin, üzerinde çalıştığım React-Native projesinde, aşağıdaki dosyaya ve içeriğine sahibim:

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

TodoReducer.js'de, kıvırcık parantez olmadan içe aktarmak zorundayım:

import initialState from './todoInitialState';

initialStateKıvırcık parantez içine alırsanız, aşağıdaki kod satırı için aşağıdaki hatayı alıyorum:

Undefined özelliği todo okunamıyor

export default function todos(state = initialState.todo, action) {
// ...
}

Kıvırcık parantez ile bileşenlerime de benzer hatalar oluyor. Tek bir içe aktarma için kıvırcık parantezleri ne zaman kullanmam gerektiğini merak ediyordum, çünkü açıkçası, birden fazla bileşen / modülü içe aktarırken, bunları bildiğim kıvırcık parantez içine almanız gerekiyor.

Düzenle:

SO sonrası burada yerine Soruyorum, soruma cevap vermez zaman ben veya ithalatı için kıvırcık parantez gerektiğine tek bu görünüşte değil (modülü, yoksa ES6 tek modül ithalatı için kıvırcık parantez asla durumda, kıvırcık parantez ile tek ithalat gördüğüm gibi)

Bu varsayılan bir içe aktarmadır :

// B.js
import A from './A'

Bu, yalnızca çalışır Asahiptir varsayılan ihracat :

// A.js
export default 42

Bu durumda, içe aktarırken hangi adı atadığınız önemli değildir:

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

Her zaman çözecektir Çünkü odur için varsayılan ihracat arasında A.

Bu, şu şekilde adlandırılmış bir içe aktarmadırA :

import { A } from './A'

Yalnızca şu şekilde adlandırılmış bir dışa aktarmaA içeriyorsa çalışır :A

export const A = 42

Bu durumda, belirli bir şeyi dışa aktarma adıyla içe aktardığınız için ad önemlidir :

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

Bu işi yapmak için, bir eklersiniz tekabül adlı ihracat için A:

// A.js
export const A = 42
export const myA = 43
export const Something = 44

Bir modülün yalnızca bir varsayılan dışa aktarımı olabilir , ancak istediğiniz sayıda adlandırılmış dışa aktarma (sıfır, bir, iki veya çok) olabilir. Hepsini birlikte içe aktarabilirsiniz:

// B.js
import A, { myA, Something } from './A'

Burada, varsayılan olarak ihracat ithalat Ave denilen adında ihracatını myAve Somethingsırasıyla.

// A.js
export default 42
export const myA = 43
export const Something = 44

İçe aktarırken onlara tüm farklı adları atayabiliriz:

// B.js
import X, { myA as myX, Something as XSomething } from './A'

Varsayılan dışa aktarmalar, modülden normalde almayı beklediğiniz her şey için kullanılır. Belirtilen dışa aktarmalar, kullanışlı olabilecek, ancak her zaman gerekli olmayan yardımcı programlar için kullanılma eğilimindedir. Ancak, bir şeyin nasıl dışa aktarılacağını seçmek size bağlıdır: örneğin, bir modülün varsayılan dışa aktarımı olmayabilir.

Bu, ES modülleri için varsayılan ve adlandırılmış dışa aktarma arasındaki farkı açıklayan harika bir kılavuzdur.

Ayrıca importsöylemeye değer ES6 anahtar kelime için yıldızlı bir gösterim olduğunu söyleyebilirim .

Günlük Mix'i konsollamaya çalışırsanız:

import * as Mix from "./A";
console.log(Mix);

Alacaksın:

ES6 içe aktarma için ne zaman süslü parantez kullanmalıyım?

Braketler, modülden yalnızca belirli bileşenlere ihtiyacınız olduğunda altındır, bu da web paketi gibi paketleyiciler için daha küçük ayak izleri yapar.

Yukarıdaki Dan Abramov cevabı, varsayılan ihracatlar ve adlandırılmış ihracatlar hakkında açıklıyor .

Hangisi kullanılır?

Alıntı David Herman : ECMAScript 6, tek / varsayılan dışa aktarma stilini tercih eder ve varsayılanı içe aktarmak için en tatlı sözdizimini verir. İsimli ihracatın ithalatı biraz daha az özlü olabilir ve hatta daha az özlü olabilir.

Ancak TypeScript'te yeniden düzenleme nedeniyle dışa aktarma adı verilir. Örneğin, bir sınıfı varsayılan olarak dışa aktarır ve yeniden adlandırırsanız, sınıf adı diğer başvurularda değil, yalnızca bu dosyada değişir; adlandırılmış dışa aktarma sınıfı adı tüm başvurularda yeniden adlandırılır. Kamu hizmetleri için adlandırılmış ihracat da tercih edilir.

Genel olarak ne isterseniz kullanın.

Ek

Varsayılan dışa aktarma aslında varsayılan olarak adlandırılmış bir dışa aktarmadır, bu nedenle varsayılan dışa aktarma şu şekilde içe aktarılabilir:

import {default as Sample} from '../Sample.js';

importDüğüm modülleri, nesneler ve yıkım için sadece sözdizimi şekeri olduğunu düşünüyorsanız, bunun oldukça sezgisel olduğunu düşünüyorum.

// bar.js
module = {};

module.exports = { 
  functionA: () => {},
  functionB: ()=> {}
};

 // really all that is is this:
 var module = { 
   exports: {
      functionA, functionB
   }
  };

// then, over in foo.js

// the whole exported object: 
var fump = require('./bar.js'); //= { functionA, functionB }
// or
import fump from './bar' // same thing, object functionA and functionB props


// just one prop of the object
var fump = require('./bar.js').functionA;

// same as this, right?
var fump = { functionA, functionB }.functionA;

// and if we use es6 destructuring: 
var { functionA } =  { functionA, functionB };
// we get same result

// so, in import syntax:
import { functionA } from './bar';

Kıvırcık parantezlerin importifadelerde kullanımını anlamak için , önce ES6'da tanıtılan yıkım kavramını anlamanız gerekir.

1. Nesne yok etme

   var bodyBuilder = {
     firstname: 'Kai',
     lastname: 'Greene',
     nickname: 'The Predator'
   };
   
   var {firstname, lastname} = bodyBuilder;
   console.log(firstname, lastname); //Kai Greene
   
   firstname = 'Morgan';
   lastname = 'Aste';
   
   console.log(firstname, lastname); // Morgan Aste

2. Dizi yıkımı

   var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
   
   console.log(firstGame); // Gran Turismo

   Liste eşlemeyi kullanma

     var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
     console.log(secondGame); // Burnout

   Forma operatörünü kullanma

   var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
   console.log(firstGame);// Gran Turismo
   console.log(rest);// ['Burnout', 'GTA'];

Şimdi bunu yolumuzdan çıkardığımıza göre , ES6'da birden fazla modülü dışa aktarabilirsiniz. Daha sonra aşağıdaki gibi nesne yıkımından faydalanabilirsiniz

Diyelim ki bir modülünüz var module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

Dışa aktarılan işlevleri içine aktarmak istediğinizde index.js;

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

Bunun gibi farklı değişken adları da kullanabilirsiniz

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');

Özet ES6modüller:

ihracat:

2 tür ihracatınız var:

1. Adlandırılmış ihracat
2. Varsayılan dışa aktarma, modül başına maks. 1

Sözdizimi:

// Module A
export const importantData_1 = 1;
export const importantData_2 = 2;
export default function foo () {}

İthalat:

İhracat tipi (yani adlandırılmış veya varsayılan ihracatı) nasıl ithalat şey etkiler:

1. Adlandırılmış bir dışa aktarma için , dışa aktarılan bildirim (yani değişken, işlev veya sınıf) olarak küme parantezlerini ve tam adını kullanmamız gerekir .
2. Varsayılan dışa aktarma için adı seçebiliriz.

Sözdizimi:

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // for our named imports

// syntax single named import: 
// import { importantData_1 } 

// for our default export (foo), the name choice is arbitrary
import ourFunction from './A';   

İlgilenilen şeyler:

1. Belirtilen dışa aktarma için dışa aktarma adıyla eşleşen kıvırcık ayraçlarda virgülle ayrılmış bir liste kullanın .
2. Varsayılan dışa aktarma için kıvırcık parantez olmadan seçtiğiniz bir adı kullanın.

Takma adlar:

Adlandırılmış bir içe aktarmayı yeniden adlandırmak istediğinizde, bu takma adlarla mümkündür . Bunun sözdizimi şudur:

import { importantData_1 as myData } from './A';

Şimdi içe aktardık importantData_1 ancak tanımlayıcı myDatayerine importantData_1.

genellikle bir işlevi dışa aktardığınızda {}

if you have export const x 

kullan import {x} from ''

if you use export default const x 

import X from '' Burada kullanmanız gereken X'i istediğiniz değişkenle değiştirebilirsiniz

Kıvırcık parantezler ({}) adlandırılmış bağlamaları içe aktarmak için kullanılır ve arkasındaki kavram yıkıcı atamadır

Import ifadesinin bir örnekle nasıl çalıştığının basit bir gösterimi Javascript ithalatında '{}' ne zaman kullanılır?

Kıvrık ayraçlar yalnızca dışa aktarma adı verildiğinde içe aktarma için kullanılır. Dışa aktarma varsayılansa, içe aktarma için süslü ayraçlar kullanılmaz.

Varsayılan dışa aktarma için içe aktarırken {} kullanmıyoruz.

Örneğin

player.js

export default vx;

index.js

import vx from './player';

index.js

player.js

İhracat yaptığımız her şeyi içe aktarmak istiyorsak *