export const foo,export default foo和module.exports = foo之间的区别

时间:2023-01-23 21:56:52

I am really confused about:

我真的很困惑:

  1. export const foo
  2. export const foo
  3. export default foo
  4. 导出默认foo
  5. module.exports = foo;
  6. module.exports = foo;

I know these are very basic but could someone please differentiate and explain these to me. I really want to understand.

我知道这些是非常基本的,但有人可以区分并向我解释这些。我真的很想了解。

3 个解决方案

#1


16  

Let take each of these one by one.

让我们逐一进行。

export const

出口常数

 export const foo

This is ES6 export syntax for a named export. You can have many named exports. It says that you want to export the value of the variable foo and you are also declaring that symbol to be const in this module.

这是命名导出的ES6导出语法。您可以有许多命名导出。它表示您要导出变量foo的值,并且您还在此模块中将该符号声明为const。

You can't actually use export const foo all by itself just like you can use const foo; all by itself. Instead, you would have to assign something to it:

你实际上不能使用export const foo,就像你可以使用const foo一样;一个人。相反,你必须为它分配一些东西:

export const foo = 12;

The const applies only to within the module itself. It does not affect what someone can do with the value once they've imported the value from the module on the other end because at the other end (where its imported), it's value is copied into another variable. If that other variable is created with the import statement, then it is automatically const on the import side (you cannot assign to it) no matter what it was declared on the export side.

const仅适用于模块本身。一旦他们从另一端的模块导入值,它不会影响某人可以对该值执行的操作,因为在另一端(导入的位置),它的值被复制到另一个变量中。如果使用import语句创建了另一个变量,那么无论在导出端声明了什么,它都会在导入端自动为const(您无法分配给它)。

This could be imported as either of these:

这可以作为以下任何一种导入:

import {foo as localFoo} from 'lib';
import {foo} from 'lib';

The first imports the foo property of the module into a localFoo named variable. The second imports the foo property of the module into a foo named variable.

第一个将模块的foo属性导入localFoo命名变量。第二个将模块的foo属性导入foo命名变量。


export default

出口默认

export default foo

This is also ES6 syntax and says that you also want to export the value of the variable foo and you want that to be the default export value so if someone imports just the module and not any properties of the module, this is the variable they will get. You can only have one default export per module.

这也是ES6语法,并且说你也想导出变量foo的值,并且你希望它是默认的导出值,所以如果有人只导入模块而不是模块的任何属性,那么这就是变量得到。每个模块只能有一个默认导出。

Internally, the default export is really just a named export with the special name default assigned:

在内部,默认导出实际上只是一个命名导出,其特殊名称为default:

import localVar from 'myLib';

This will get the default export from myLib and assign it's value to a locally declared variable named localVar. The above is a shorthand for this:

这将从myLib获取默认导出,并将其值分配给名为localVar的本地声明的变量。以上是此的简写:

import { default as localVar } from 'lib';

So, the default export just allows you to have a shortcut import for one particular export. The ES6 import/export syntax was designed to make the syntax as brief as possible for the default import/export. But, for obvious reasons, there is only one default property per module.

因此,默认导出只允许您为一个特定导出导入快捷方式。 ES6导入/导出语法旨在使默认导入/导出的语法尽可能简短。但是,由于显而易见的原因,每个模块只有一个默认属性。


module.exports

module.exports

// inside of myModule
module.exports = foo;

This is node.js syntax for exporting the value of the variable foo and you're exporting it at the top level. When someone uses this module:

这是node.js语法,用于导出变量foo的值,并在顶层导出它。当有人使用此模块时:

let x = require('myModule');
console.log(x);    //  will show the value of `foo` from the previous module

This is not ES6 syntax, but is regular ES5-compatible syntax using the module.exports and require() infrastructure built into node.js.

这不是ES6语法,而是使用node.js内置的module.exports和require()基础结构的常规ES5兼容语法。

#2


2  

The export statement is used to export functions, objects or primitives from a given file (or module).

export语句用于从给定文件(或模块)导出函数,对象或基元。


Named Exports This is a named export in ES6 javascript

命名导出这是ES6 javascript中的命名导出

export const foo

which is imported like:

导入如下:

import { foo } from 'path'

Default Export This is a default export (This can be imported using any name)

默认导出这是默认导出(可以使用任何名称导入)

export default foo

which is imported like so:

它是这样导入的:

import bar from 'path'

This is commonjs export which is used in nodejs programs.

这是在nodejs程序中使用的commonjs export。

module.exports = foo;

module.exports = foo;

which is imported like:

导入如下:

var foo = require('path')

For more details

更多细节

#3


0  

export const foo : exports constants (ES6) export default foo : exports object (ES6)

export const foo:exports constants(ES6)export default foo:exports object(ES6)

Above statements are ECMA Script 2015 (aka ES6) implementation.

以上陈述是ECMA Script 2015(又名ES6)实现。

In an normal ES6 JS file one can export any object(variable) or constants. Pls note that you cannot change constant reference, though internal structure can be modified(weird).

在普通的ES6 JS文件中,可以导出任何对象(变量)或常量。请注意,您不能更改常量引用,但可以修改内部结构(很奇怪)。

In ES6 one can have multiple exports in module(script file). which can be added in calling script as

在ES6中,可以在模块(脚本文件)中有多个导出。可以在调用脚本中添加

import {Obj1, Obj2} from module_file

coming to export default, One can have only one export default in module. and while importing when exact names are not defined default is been picked up.

即将导出默认值,模块中只能有一个导出默认值。当导入未定义确切名称时,默认值已被选中。

module.exports = foo; is older implementation and it is same as export default. except it is imported with require statement instead of import

module.exports = foo;是较旧的实现,它与导出默认值相同。除了使用require语句而不是import导入它

for more refer https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

有关更多信息,请参阅https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

#1


16  

Let take each of these one by one.

让我们逐一进行。

export const

出口常数

 export const foo

This is ES6 export syntax for a named export. You can have many named exports. It says that you want to export the value of the variable foo and you are also declaring that symbol to be const in this module.

这是命名导出的ES6导出语法。您可以有许多命名导出。它表示您要导出变量foo的值,并且您还在此模块中将该符号声明为const。

You can't actually use export const foo all by itself just like you can use const foo; all by itself. Instead, you would have to assign something to it:

你实际上不能使用export const foo,就像你可以使用const foo一样;一个人。相反,你必须为它分配一些东西:

export const foo = 12;

The const applies only to within the module itself. It does not affect what someone can do with the value once they've imported the value from the module on the other end because at the other end (where its imported), it's value is copied into another variable. If that other variable is created with the import statement, then it is automatically const on the import side (you cannot assign to it) no matter what it was declared on the export side.

const仅适用于模块本身。一旦他们从另一端的模块导入值,它不会影响某人可以对该值执行的操作,因为在另一端(导入的位置),它的值被复制到另一个变量中。如果使用import语句创建了另一个变量,那么无论在导出端声明了什么,它都会在导入端自动为const(您无法分配给它)。

This could be imported as either of these:

这可以作为以下任何一种导入:

import {foo as localFoo} from 'lib';
import {foo} from 'lib';

The first imports the foo property of the module into a localFoo named variable. The second imports the foo property of the module into a foo named variable.

第一个将模块的foo属性导入localFoo命名变量。第二个将模块的foo属性导入foo命名变量。


export default

出口默认

export default foo

This is also ES6 syntax and says that you also want to export the value of the variable foo and you want that to be the default export value so if someone imports just the module and not any properties of the module, this is the variable they will get. You can only have one default export per module.

这也是ES6语法,并且说你也想导出变量foo的值,并且你希望它是默认的导出值,所以如果有人只导入模块而不是模块的任何属性,那么这就是变量得到。每个模块只能有一个默认导出。

Internally, the default export is really just a named export with the special name default assigned:

在内部,默认导出实际上只是一个命名导出,其特殊名称为default:

import localVar from 'myLib';

This will get the default export from myLib and assign it's value to a locally declared variable named localVar. The above is a shorthand for this:

这将从myLib获取默认导出,并将其值分配给名为localVar的本地声明的变量。以上是此的简写:

import { default as localVar } from 'lib';

So, the default export just allows you to have a shortcut import for one particular export. The ES6 import/export syntax was designed to make the syntax as brief as possible for the default import/export. But, for obvious reasons, there is only one default property per module.

因此,默认导出只允许您为一个特定导出导入快捷方式。 ES6导入/导出语法旨在使默认导入/导出的语法尽可能简短。但是,由于显而易见的原因,每个模块只有一个默认属性。


module.exports

module.exports

// inside of myModule
module.exports = foo;

This is node.js syntax for exporting the value of the variable foo and you're exporting it at the top level. When someone uses this module:

这是node.js语法,用于导出变量foo的值,并在顶层导出它。当有人使用此模块时:

let x = require('myModule');
console.log(x);    //  will show the value of `foo` from the previous module

This is not ES6 syntax, but is regular ES5-compatible syntax using the module.exports and require() infrastructure built into node.js.

这不是ES6语法,而是使用node.js内置的module.exports和require()基础结构的常规ES5兼容语法。

#2


2  

The export statement is used to export functions, objects or primitives from a given file (or module).

export语句用于从给定文件(或模块)导出函数,对象或基元。


Named Exports This is a named export in ES6 javascript

命名导出这是ES6 javascript中的命名导出

export const foo

which is imported like:

导入如下:

import { foo } from 'path'

Default Export This is a default export (This can be imported using any name)

默认导出这是默认导出(可以使用任何名称导入)

export default foo

which is imported like so:

它是这样导入的:

import bar from 'path'

This is commonjs export which is used in nodejs programs.

这是在nodejs程序中使用的commonjs export。

module.exports = foo;

module.exports = foo;

which is imported like:

导入如下:

var foo = require('path')

For more details

更多细节

#3


0  

export const foo : exports constants (ES6) export default foo : exports object (ES6)

export const foo:exports constants(ES6)export default foo:exports object(ES6)

Above statements are ECMA Script 2015 (aka ES6) implementation.

以上陈述是ECMA Script 2015(又名ES6)实现。

In an normal ES6 JS file one can export any object(variable) or constants. Pls note that you cannot change constant reference, though internal structure can be modified(weird).

在普通的ES6 JS文件中,可以导出任何对象(变量)或常量。请注意,您不能更改常量引用,但可以修改内部结构(很奇怪)。

In ES6 one can have multiple exports in module(script file). which can be added in calling script as

在ES6中,可以在模块(脚本文件)中有多个导出。可以在调用脚本中添加

import {Obj1, Obj2} from module_file

coming to export default, One can have only one export default in module. and while importing when exact names are not defined default is been picked up.

即将导出默认值,模块中只能有一个导出默认值。当导入未定义确切名称时,默认值已被选中。

module.exports = foo; is older implementation and it is same as export default. except it is imported with require statement instead of import

module.exports = foo;是较旧的实现,它与导出默认值相同。除了使用require语句而不是import导入它

for more refer https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

有关更多信息,请参阅https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export