javascript içe aktarma sözdizimi ile parantez kullanma

Kitaplıkları içe aktarmak için aşağıdaki sözdizimini kullanan bir javascript kitaplığıyla karşılaştım:

import React, { Component, PropTypes } from 'react';

Yukarıdaki yöntem ile aşağıdakiler arasındaki fark nedir?

import React, Component, PropTypes from 'react';

import React, { Component, PropTypes } from 'react';

Bu diyor ki:

İçe varsayılan gelen ihracat 'react'adı altında Reactve ithalat adlı ihracatını Componentve PropTypesaynı adlar altında.

Bu, muhtemelen gördüğünüz iki ortak sözdizimini birleştirir

import React from 'react';
import { Component, PropTypes } from 'react';

Birincisi varsayılan dışa aktarmayı içe aktarmak ve adlandırmak için kullanılırken, ikincisi belirtilen adlandırılmış dışa aktarmaları içe aktarmak için kullanılır.

Genel bir kural olarak, çoğu modül ya tek bir varsayılan dışa aktarma ya da adlandırılmış dışa aktarımların bir listesini sağlar. Bir modül varsayılan bir ihracat hem sağlamak için bu biraz daha az olağan olduğu ve adlandırılmış ihracat. Bununla birlikte, en yaygın olarak içe aktarılan bir özelliğin yanı sıra ek alt özelliklerin olduğu durumda, ilkini varsayılan olarak ve kalanlarını adlandırılmış dışa aktarmalar olarak dışa aktarmak geçerli bir tasarımdır. Bu tür durumlarda, importatıfta bulunduğunuz sözdizimini kullanırsınız.

Diğer cevaplar yanlış ve kafa karıştırıcı arasında bir yerdedir, bunun nedeni muhtemelen bu sorunun sorulduğu sırada MDN belgelerinin yanlış ve kafa karıştırıcı olmasıdır. MDN örneği gösterdi

import name from "module-name";

ve name"içe aktarılan değerleri alacak nesnenin adı" dır. Ama bu yanıltıcı ve yanlış; her şeyden önce, "alınacak" yalnızca bir içe aktarma değeri vardır (neden yalnızca "atanmış" veya "başvurmak için kullanılır" demiyorsunuz) nameve bu durumda içe aktarma değeri , modülden varsayılan dışa aktarmadır .

Bunu açıklamanın bir başka yolu da, yukarıdaki içe aktarmanın tam olarak aynı olduğuna dikkat etmektir.

import { default as name } from "module-name";

ve OP'nin örneği tam olarak aynıdır

import { default as React, Component, PropTypes } from 'react';

MDN belgeleri örneği göstermeye devam etti

import MyModule, {foo, bar} from "my-module.js";

ve bunun anlamına geldiğini iddia etti

Bazıları da açıkça adlandırılmış bir modülün tüm içeriğini içe aktarın. Bu myModule, (sic) foove bargeçerli kapsama ekler . Not olduğunu foove myModule.foogibidir, aynı barvemyModule.bar

MDN'nin burada söylediği ve yanlış MDN belgelerine dayanan diğer yanıtların iddia ettiği şey kesinlikle yanlıştır ve spesifikasyonun daha önceki bir sürümüne dayanıyor olabilir. Bunun aslında yaptığı şey

Varsayılan modül dışa aktarımını ve açıkça adlandırılmış bazı dışa aktarmaları içe aktarın. Bu uçlar MyModule, foove bargeçerli kapsam içine. İhracat isimleri foove barvardır değil erişilebilirMyModule olan varsayılan ihracat, tüm ihracatını kapsayan bazı şemsiye.

(Varsayılan modül dışa aktarımı, export defaultsözdizimi ile dışa aktarılan değerdir ve bu da olabilir export {foo as default}.)

MDN dokümantasyon yazarları aşağıdaki formla karıştırılmış olabilir:

import * as MyModule from 'my-module';

Bu my-module, tüm ihracatları içe aktarır ve bunları gibi adlar altında erişilebilir kılar MyModule.name. Varsayılan dışa aktarmaya şu MyModule.defaultadla da erişilebilir , çünkü varsayılan dışa aktarım aslında ada sahip başka bir adlandırılmış dışa aktarmadan başka bir şey değildir default. Bu sözdiziminde, adlandırılmış dışa aktarımların yalnızca bir alt kümesini içe aktarmanın bir yolu yoktur, ancak biri varsa varsayılan dışa aktarım tüm adlandırılmış dışa aktarmalarla birlikte içe aktarılabilir.

import myModuleDefault, * as myModule from 'my-module';

import React, { Component, PropTypes } from 'react'

Bu ihraç çekecek { Component, PropTypes }üyeleri 'react'modül ve atamak Componentve PropTypessırasıyla. Reactmodülün defaultdışa aktarımına eşit olacaktır .

Aşağıda torazaburo tarafından belirtildiği gibi , bu aynıdır

import { default as React, Component, PropTypes } from 'react'

hangisinin kısaltması

import { default as React, Component as Component, PropTypes as PropTypes} from 'react'

İşte başka bir örnek ( özete bağlantı ):

// myModule.js
export let a = true
export let b = 42
export let c = 'hello, world!'
// `d` is not exported alone
let d = 'some property only available from default'

// this uses the new object literal notation in es6
// {myVar} expands to { myVar : myVar }, provided myVar exists
// e.g., let test = 22; let o = {test}; `o` is then equal to { test : 22 }
export default { a, b, d }

// example1.js
import something from 'myModule'
console.log(something)
// this yields (note how `c` is not here):
/*
  {
    a : true,
    b : 42,
    d : 'some property only available from default'
  }
*/

// example2.js
import something, { c } from 'myModule'
console.log(something)  // same as above; the `default` export
console.log(c)          // c === 'hello, world!'

// example3.js
import { a, b, d, default as something } from 'myModule'
console.log(a)            // a === true
console.log(b)            // b === 42
console.log(d)            // d === undefined (we didn't export it individually)
console.log(something.d)  // something.d === 'some property...'

İkinci örneği babel ile test ettim:

import test, test3, test2 from './app/lib/queries.js'
console.log(test, test3, test2)

ve bir sözdizimi hatası aldı.

~/code/repo/tutoring $ babel-node test.js
/Users/royhowie/.node/lib/node_modules/babel/node_modules/babel-core/lib/babel/transformation/file/index.js:601
      throw err;
            ^
SyntaxError: /Users/royhowie/code/repo/tutoring/test.js: Unexpected token (1:13)
> 1 | import test, test3, test2 from './app/lib/queries.js'
    |              ^
  2 | 
  3 | console.log(test, test3, test2)
  4 | 

Başvuru için, importMDN'den gelen yeni dokümantasyonu okuyabilirsiniz . Ancak, görünüşe göre teknik incelemeye ihtiyacı var. Dr. Axel Rauschmayer'in blog yazısı şimdilik daha iyi bir referans.