Вопросы Теги

Необходимость фигурных скобок при импорте модулей [дубликат]

Один вкладыш, используя find: 

find -type f -exec grep -lm1 "PATTERN" {} \; -a -quit
97
задан ftor 2 September 2016 в 08:57
поделиться

2 ответа

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

Это говорит:

Импортирует экспорт по умолчанию из 'react' под именем React и импортирует именованные экспортированные файлы Component и PropTypes под теми же именами.

Это объединяет два общих синтаксиса, которые вы, вероятно, видели 

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

. Первый используется для импорта и имени экспорта по умолчанию, второй для импорта указанным именованным экспортом.

Как правило, большинство модулей будут либо предоставлять единый экспорт по умолчанию, либо список именованного экспорта. Для модуля, как правило, предоставляется как экспорт экспорта, так и экспорт по умолчанию. Тем не менее, в случае, когда есть одна функция, которая чаще всего импортируется, но также дополнительные вспомогательные функции, это допустимый проект для экспорта первого в качестве значения по умолчанию, а остальные - для имени экспорта. В таких случаях вы использовали бы синтаксис import, на который вы ссылаетесь.

Другие ответы находятся где-то между неправильным и запутанным, возможно, потому, что документы MDN в момент запроса этого вопроса были неправильными и запутанными , MDN показал пример 

import name from "module-name";

и сказал, что name является «именем объекта, который получит импортированные значения». Но это вводит в заблуждение и неверно; в первую очередь, есть только одно значение импорта, которое будет «получено» (почему бы просто не сказать «назначено» или «используется для ссылки») name, а значение импорта в этом случае является экспорт по умолчанию из модуля.

Другой способ объяснить это - отметить, что указанный импорт точно идентичен 

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

, а пример OP точно идентичен 

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

В документации MDN был показан пример 

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

и утверждалось, что это означает

Импортировать содержимое всего модуля, причем некоторые из них также явно по имени. Это вставляет myModule (sic), foo и bar в текущую область. Обратите внимание, что foo и myModule.foo совпадают, как bar и myModule.bar

. Что сказано в MDN и какие другие ответы утверждают на основании неправильной документации MDN, является абсолютно неправильным и может основываться на более ранней версии спецификации. Что это на самом деле делает

Импортировать экспорт модуля по умолчанию и некоторые явно названные экспорта. Это вставляет MyModule, foo и bar в текущую область. Названия экспорта foo и bar - not , доступные через MyModule, который является экспортом по умолчанию , а не какой-либо зонтик, охватывающий все экспортные данные.

< / blockquote>

(Экспорт по умолчанию - это значение, экспортированное с помощью синтаксиса export default, которое также может быть export {foo as default}.)

Авторы документации MDN, возможно, путались со следующей формой : 

import * as MyModule from 'my-module';

Импортирует весь экспорт из my-module и делает их доступными под именами, такими как MyModule.name. Экспорт по умолчанию также доступен как MyModule.default, поскольку экспорт по умолчанию - это не что иное, как другой экспорт с именем default. В этом синтаксисе нет способа импортировать только подмножество именованного экспорта, хотя можно импортировать экспорт по умолчанию, если он есть вместе со всеми указанными экспортами с помощью 

import myModuleDefault, * as myModule from 'my-module';
154
ответ дан user 19 August 2018 в 08:22
поделиться
  • 1
    Вавилон принимает from '/path/to/my-module.js', хотя я лично использую from '/path/to/my-module'. – royhowie 28 June 2015 в 21:21
  • 2
    С таким подробным объяснением вы также должны добавить, как они экспортируются для их импорта. – Caio Iglesias 27 July 2016 в 16:12 
import React, { Component, PropTypes } from 'react'

Это позволит захватить экспортированные члены { Component, PropTypes } из модуля 'react' и назначить их соответственно Component и PropTypes. React будет равно экспорту default модуля.

Как отмечено торазабуро ниже , это то же самое, что и 

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

, что является сокращением для 

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

Вот еще один пример ( ссылка на gist ): 

// 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...'

Я проверил второй пример с babel: 

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

и получил синтаксическую ошибку. 

~/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 |

Для справки вы можете прочитать новую import документацию из MDN. Однако, по-видимому, он нуждается в техническом обзоре. Д-р. Аккаунт Axel Rauschmayer является лучшей ссылкой на данный момент.

33
ответ дан Community 19 August 2018 в 08:22
поделиться
  • 1
    Это позволит захватить свойства {Component, PropTypes} из экспорта в модуле «реагировать» и назначить их для React. Это неверно. Он присваивает экспорт по умолчанию React и названный экспорт Component и PropTypes в переменные с тем же именем. К сожалению, документы MDN ошибочны, поскольку вы узнали, пробовали ли вы это. См. 2ality.com/2014/09/es6-modules-final.html . Кроме того, синтаксис импорта не имеет ничего общего с назначением деструктуризации. – user 28 June 2015 в 09:25
  • 2
    Что касается вашего комментария о «новой import документации», рассматривая историю изменений этой статьи MDN, части, которые вы цитируете, не были пересмотрены, поскольку страница была впервые написана более года назад, период, в течение которого синтаксис модуля быстро менялся. – user 28 June 2015 в 10:27
  • 3
    @torazaburo Я переписал свой ответ, чтобы быть более точным. – royhowie 28 June 2015 в 21:20
  • 4
    @royhowie Большое спасибо за этот пример! Буквально сэкономили еще один час бездумного просмотра ... У меня только один вопрос. В example3.js зачем он печатал undefined для console.log(d)? Поскольку вы сделали export default { a, b, d }, так что вы экспортировали его в myModule.js. – CapturedTree 24 May 2017 в 03:31
  • 5
    @ 1290 В myModule.js обратите внимание, что a, b и c экспортируются отдельно. Это означает, что другой файл может импортировать их напрямую с помощью import { a } from 'myModule'. С другой стороны, d доступен только через экспорт по умолчанию, поэтому другой модуль может получить к нему доступ двумя способами: import thisObjectContainsDefault from 'myModule' и получить доступ к нему через thisObjectContainsDefault.d ИЛИ import { default as wrapperObject } и wrapperObject.d. Преимущество второго подхода заключается в том, что вы также можете захватывать элементы, которые были экспортированы по отдельности, как это видно из example3.js. – royhowie 24 May 2017 в 18:24
Другие вопросы по тегам:

Похожие вопросы: