在 javascript 导入语法中使用方括号

Question

我遇到了一个 javascript 库，它使用以下语法导入库：

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

上面的方法和下面的有什么区别？

import React, Component, PropTypes from 'react';

Answer 1

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

这将从 'react' 模块获取导出的 { Component, PropTypes } 成员并将它们分别分配给 Component 和 PropTypes。 React 将等于模块的 default 导出。

，这个和

是一样的

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

对于

来说是shorthand

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

这是另一个例子 (link to 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 documentation from MDN. However, it is apparently in need of technical review. Dr. Axel Rauschmayer's blog post 目前是更好的参考。

Answer 2

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

这表示：

Import the default export from 'react' under the name React and import the named exports Component and PropTypes under the same names.

这结合了您可能见过的两种常见语法

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

第一个用于导入和命名默认导出，第二个用于导入指定的命名导出。

作为一般规则，大多数模块将提供单个默认导出或命名导出列表。模块同时提供默认导出和命名导出的情况不太常见。但是，如果有一个功能是最常导入的，但也有其他子功能，则将第一个导出为默认值，其余的作为命名导出是一种有效的设计。在这种情况下，您将使用您引用的 import 语法。

其他答案介于错误和令人困惑之间，可能是因为提出此问题时的 MDN 文档是错误和令人困惑的。 MDN 展示了例子

import name from "module-name";

并说 name 是 "name of the object that will receive the imported values." 但这是误导和不正确的；首先，只有一个导入值，它将是 "received" （为什么不直接说 "assigned to" 或 "used to refer to"） 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";

并声称这意味着

Import an entire module's contents, with some also being explicitly named. This inserts myModule (sic), foo, and bar into the current scope. Note that foo and myModule.foo are the same, as are bar and myModule.bar

MDN 在这里所说的，以及其他基于不正确的 MDN 文档的答案是绝对错误的，并且可能基于规范的早期版本。这实际上是

Import the default module export and some explictly named exports. This inserts MyModule, foo, and bar into the current scope. The export names foo and bar are not accessible via MyModule, which is the default export, not some umbrella covering all exports.

（默认模块导出是用export default语法导出的值，也可以是export {foo as default}。）

MDN 文档编写者可能对以下形式感到困惑：

import * as MyModule from 'my-module';

这将从 my-module 导入所有导出，并使它们可以在 MyModule.name 等名称下访问。默认导出也可以作为 MyModule.default 访问，因为默认导出实际上只不过是另一个名为 default 的命名导出。在这种语法中，无法只导入命名导出的一个子集，尽管可以导入默认导出，如果有的话，连同所有命名导出，with

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

在 javascript 导入语法中使用方括号

using brackets with javascript import syntax

javascript

ecmascript-6

es6-modules