从MDN文档导入ES6中的语句 [英] Import Statements in ES6 from MDN docs

问题描述

我正在浏览 Firefox导入声明。

他们已经显示了这样的某些进口声明

They have shown certain import statement like this

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

但是没有添加示例来帮助区分一些和他们的例子也有点模糊。

But haven't added example to help differentiate between some and their example is also sort of vague.

从文档来看，有很多事情对我来说没有意义..例如，名称与有什么不同？ defaultExport

From the docs, There are multiple things which doesn't make sense to me.. for example how is name different from defaultExport

虽然默认导出对我有意义，但名称的定义有点难以理解

While default export does make sense to me, the defination of name is sort of difficult to comprehend

他们给出的解释：

name参数是模块对象的名称，它将是
用作一种命名空间来引用导出。

The name parameter is the name of the "module object" which will be used as a kind of namespace to refer to the exports.

从上面的语法： importmodule-名称;

第二名：

import { export as alias } from "module-name";

另外，假设我们有多个需要导出的功能

Also, if suppose we have multiple function which we need to export

function abc1 () {
}

function abc2 () {
} 

这是正确的出口方式吗？

Will this be the correct way to export?

export abc1;
export abc2; 

然后如果我们导入，我们如何将变量附加到它？这是这样的声明吗？

And then if we import, how would we attach variable to it? Is this where statement like this come in?

import { export as alias } from "module-name";

推荐答案

鉴于此模块模块 - name ：

// module-name.js
export default function foo(){ console.log("foo");}
export function bar(){ console.log("bar");}
console.log("hello world");

考虑以下使用命令<$ c在node.js v9.11.1中测试的情况$ c> node --experimental-modules some-importer.mjs ：

// import defaultExport from "module-name";
import fizzbuzz from "module-name";

因此只有默认出口可用：

Only the default export will be available thus:

• fizzbuzz （ foo ）可用


• bar 不可用


• console.log（你好世界）已经运行

• fizzbuzz (which is foo) is available
• bar is not available
• console.log(hello world) will have been run

import * as name from "module-name";

所有导出都可用但附加到标识为 name ：

All exports are available but attached to an Object identified as name:

• foo 不可用


• bar 不可用


• name.foo 不可用（虽然您认为会是这样）


• name。 bar 可用


• console.log（hello world）已经运行

• foo is not available
• bar is not available
• name.foo is not available (though you think it would be)
• name.bar is available
• console.log(hello world) will have been run

// import { export } from "module-name";
import { bar } from "module-name"

只有已识别的导出可用：

Only the identified export is available:

• foo 不可用


• bar 可用


• console.log（hello world）将被运行

• foo is not available
• bar is available
• console.log(hello world) will have been run

// import { export as alias } from "module-name";
import { bar as mybar } from "module-name";

只有已识别的导出可用且仅为标识的别名：

Only the identified export is available and only as the identified alias:

• foo 不可用


• bar 不可用


• mybar （ bar ）可用


• console.log（hello world）已经运行

• foo is not available
• bar is not available
• mybar (which is bar) is available
• console.log(hello world) will have been run

// import defaultExport, * as name from "module-name";
import fizzbuzz, * as name from "module-name";

模块中的默认项目可以引用为 defaultExport 和所有其他导出项目附加到名称

The default item from the module can be referenced as defaultExport and all other exported items are attached to name

• fizzbuzz （ foo ）可用


• bar 不可用


• name.bar 可用


• console.log（hello world）已经运行

• fizzbuzz (which is foo) is available
• bar is not available
• name.bar is available
• console.log(hello world) will have been run

import "module-name";

模块已加载，但导入的模块中实际上没有任何内容可用。这意味着文件运行但没有任何暴露

The module is loaded, but nothing is actually available in the module that imported. This means that file runs but nothing is exposed

• foo 不是可用


• bar 不可用


• console.log（hello world）将被运行

• foo is not available
• bar is not available
• console.log(hello world) will have been run

这篇关于从MDN文档导入ES6中的语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！