使用括号与 javascript 导入语法

IT技术 javascript ecmascript-6 es6-modules
2021-01-14 18:35:20

我遇到了一个使用以下语法导入库的 javascript 库:

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

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

import React, Component, PropTypes from 'react';
2个回答
import React, { Component, PropTypes } from 'react';

这说:

名称下导入默认导出以相同名称导入命名导出'react'ReactComponentPropTypes

这结合了您可能已经看到的两种常见语法

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

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

作为一般规则,大多数module将提供单个默认导出或命名导出列表。module提供默认导出命名导出的情况有点少见但是,如果有一个最常导入的特征,但还有其他子特征,则将第一个作为默认导出,将其余的作为命名导出导出是有效的设计。在这种情况下,您将使用import您引用语法。

其他答案介于错误和混乱之间,可能是因为提出这个问题时的 MDN 文档是错误和混乱的。MDN 展示了示例

import name from "module-name";

并表示name“将接收导入值的对象的名称”。但这是误导和不正确的;首先,只有一个导入值,它将被“接收”(为什么不直接说“分配给”或“用于引用”)name,并且在这种情况下导入值是module默认导出.

解释这一点的另一种方式是注意上述导入与

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";

并声称这意味着

导入整个module的内容,其中一些也被明确命名。这会将myModule(sic)、foobar插入当前范围。请注意,foomyModule.foo是相同的,就像是barmyModule.bar

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

导入默认module导出和一些显式命名的导出。这会将MyModulefoobar插入当前范围。出口名称foobar不是访问的通过MyModule,这是默认的出口,而不是一些伞覆盖全部出口。

(默认module导出是使用export default语法导出的值,也可以是export {foo as default}.)

MDN 文档作者可能对以下形式感到困惑:

import * as MyModule from 'my-module';

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

import myModuleDefault, * as myModule from 'my-module';
有了如此详细的解释,您还应该添加它们的导出方式,以便像这样导入。
2021-03-19 18:35:20
Babel 接受from '/path/to/my-module.js',虽然我个人使用from '/path/to/my-module'.
2021-03-31 18:35:20
import React, { Component, PropTypes } from 'react'

这将从module中获取导出的{ Component, PropTypes }成员'react'并将它们分别分配给ComponentPropTypesReact将等于module的default出口。

正如下面的 torazaburo 所指出的,这与

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 | 

作为参考,您可以阅读importMDN的新文档。然而,它显然需要技术审查。Axel Rauschmayer 博士的博客文章现在是更好的参考。

@ 1290 myModule.js,需要注意的是abc单独出口。这意味着另一个文件可以直接使用import { a } from 'myModule'. 另一方面,d仅通过默认导出可用,因此另一个module可以通过两种方式import thisObjectContainsDefault from 'myModule'访问它:通过thisObjectContainsDefault.dORimport { default as wrapperObject }wrapperObject.d. 第二种方法的好处是您还可以获取单独导出的项目,如 中所示example3.js
2021-03-11 18:35:20
关于你对“新import文档”的评论,回顾那篇 MDN 文章的修订历史,你所引用的部分自从一年多前第一次写页面以来就没有被修改过,在此期间module语法是变化迅速。
2021-03-16 18:35:20
@torazaburo 我重写了我的答案以使其更准确。
2021-03-18 18:35:20
这将从“react”module的导出中获取 { Component, PropTypes } 属性并将它们分配给 React。这是不正确的。它将默认导出分配给React、命名导出ComponentPropTypes同名变量。不幸的是,MDN 文档是错误的,如果您尝试过就会发现。请参阅2ality.com/2014/09/es6-modules-final.html此外,导入语法与解构赋值完全无关。
2021-03-25 18:35:20
@royhowie 非常感谢你的这个例子!!从字面上节省了另一个小时的无意识浏览......我只有一个问题。example3.js为什么它打印undefinedconsole.log(d)既然你这样export default { a, b, d }做了,你确实将它导出到myModule.js.
2021-04-04 18:35:20