ES6的import

曾经终败给现在 2023-07-08 12:24 1阅读 0赞

ES6中通过export和import实现对外部模块的引用。

# import for a default-export #

--------------------

假如有一个B.js，想要通过import语法引用模块A.js，那么可以这么写：

// B.js
    import A from './A'

上面的代码生效的前提，A.js中有默认导出的`export default`，也就是：

// A.js
    export default 42

在这种不使用\{\}来引用模块的情况下，import模块时的命名是随意的，即如下三种命名都没有问题：

// B.js
    import A from './A'
    import MyA from './A'
    import Something from './A'

因为它总是会解析到A.js中默认的`export default`。

# import \{ \} for a named-export #

--------------------

下面是使用了花括号命名的方式\{A\}来导入A.js：

import {  A } from './A'

上面代码生效的前提是，只有在模块A.js中有如下命名导出为A的export name的代码：

export const A = 42

A.js使用命名导出后，B.js中使用\{\}引用模块时，import时的模块命名必须准确：

// B.js
    import {  A } from './A'      // 正确，因为A.js中有命名为A的export
    import {  myA } from './A'    // 错误！因为A.js中没有命名为myA的export
    import {  Something } from './A' // 错误！因为A.js中没有命名为Something的export

要想上述代码正确执行，你需要明确声明每一个命名导出：

// A.js
    export const A = 42
    export const myA = 43
    export const Something = 44

一个模块中只能有一个默认导出export default，但是却可以有任意命名导出（0个、1个、多个），你也可以如下，一次性将他们导入：

// B.js
    import A, {  myA, Something } from './A'

这里我们使用导入默认导出A，以及命名导出myA和Something。

我们甚至可以在导入的时候重命名导入：

import X, {  myA as myX, Something as XSomething } from './A'

# 总结 #

--------------------

默认导出（deault export） 通常用来导出那些最常用的功能，命名导出（named export）导出的是一些非必要的功能

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6的import

ES6中通过export和import实现对外部模块的引用。 import for a default-export -------------------- 假如有

曾经终败给现在/ 2023年07月08日 12:24/ 0 赞/ 2 阅读

相关 JS ES6中export和import详解

1.Export 模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出， // profile.js

冷不防/ 2023年06月08日 03:22/ 0 赞/ 6 阅读

相关 ES6，Typescripts，如何正确import express？

使用Typescripts，在导入模块时，常常出一些难以理解的简单错误。下面就给出标准答案，让你在 import 模块的时候不再迷惑。 1. 标准做法 impo

爱被打了一巴掌/ 2022年12月24日 02:56/ 0 赞/ 92 阅读

相关 ES6模块化——import和export

一、import 1、静态import导入的js文件，在严格模式下运行静态的`import` 语句用于导入由另一个模块导出的绑定。无论是否声明了 [`strict m

╰+哭是因爲堅強的太久メ/ 2022年12月19日 03:48/ 0 赞/ 528 阅读

相关 ES6 module语法中export和import的使用

ES6模块与CommonJS模块的差异 ES6 模块与 CommonJS 模块完全不同它们有三个重大差异 CommonJS 模块输出的是一个值的拷贝，ES6

迷南。/ 2022年09月04日 09:47/ 0 赞/ 370 阅读

相关 ES6中export及export default、import的区别

相信很多人都使用过export、export default、import，然而它们到底有什么区别呢？在[JavaScript][] ES6中，export与expor

深碍√TFBOYSˉ_/ 2022年07月03日 23:52/ 0 赞/ 248 阅读

相关【ES6】const命令和import命令

const命令 const用来声明常量，一旦声明，其值就不能更改，这就意味着const一旦声明常量，就要立即初始化。 const命令的作用域与[let命令][let]

短命女/ 2022年06月06日 01:13/ 0 赞/ 343 阅读

相关 ES6之module语法（export和import）

前言：ES6 在语言标准的层面上，实现了模块功能。模块化语法一、export export：用来定义模块，可以导出对象、函数、类、字符串等等 1

迈不过友情╰/ 2022年01月26日 00:47/ 0 赞/ 373 阅读

相关 ES6模块的import和export用法总结

[ES6模块的import和export用法总结][ES6_import_export] ES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。

痛定思痛。/ 2021年10月09日 03:58/ 0 赞/ 385 阅读

相关 es6环境中，export与import使用方法

前言 > 参考自阮一峰大神的教程：[http://es6.ruanyifeng.com/?search=export&x=6&y=5\docs/module\export

柔光的暖阳◎/ 2021年09月14日 00:30/ 0 赞/ 302 阅读