ES Module export 导出字面量报错与 export default 原理解析

核心

总体而言，export 导出的是变量的句柄（即符号绑定，类似于 C 语言中的指针或 C++ 中的变量别名），而 export default 导出的是变量的具体值。

必须注意：模块内部内容仅限模块内修改，外部仅可调用。ES Module 在语法层施加了浅层约束（将导入变量声明为常量）

变量的句柄必须通过 var、let、const 或 function 等关键字声明，由 JavaScript 引擎生成；而值（或数据）可以通过变量运算或直接使用字面量生成。

以下是测试用例：

// a.js
export let a = 'a'

export let objA = { a: 'a' }

let defaultA = 1
export default defaultA

export function fn(str) {
    a = str
    defaultA = str
}

// test1.js
import b, { a, fn, objA } from './a.js'
console.log(a, '---', b, '---', objA.a, '---', 'test1.js')
setTimeout(() =&gt; {
    objA.a = 'hello world'
    fn('hello world')
    console.log(a, '---', b, '---', objA.a, '---', 'test1.js')
})

// test2.js
import b, { a, objA } from './a.js'
console.log(a, '---', b, '---', objA.a, '---', 'test2.js')
setTimeout(() =&gt; {
    console.log(a, '---', b, '---', objA.a, '---', 'test2.js')
}, 100)

// main.js
import './test1.js'
import './test2.js'

运行 main.js，输出结果如下：

分析

通过观察 a 值的变化可以看出，在 test1.js 中的修改会影响到 test2.js 中 a 的值，这验证了我们关于导出句柄的观点。
通过 b 的运行结果可以验证 export default 导出变量值的观点。
通过 objA.a 的运行结果可以验证浅层保护的观点。这与 const obj = {} 类似，我们可以修改 obj 的属性，只要不对 obj 重新赋值，逻辑上都是允许的。

如果到这里你已经完全理解上述内容，建议跳过后续部分，因为下文是细节的展开和补充，可能显得有些啰嗦。如果仍有疑惑，可以继续阅读，看看是否对你有所帮助。

接下来，我们将按照以下几个方面具体讲解这个问题，并做一些扩展和补充。

1、句柄和值
2、ES module 和 commonJs
3、关于 Tree Shaking 的思考

句柄和值

我个人将“句柄”理解为权限，获得句柄即获得对某事物的操作权限（例如文件句柄允许读写文件）。引用“句柄”一词旨在说明：export 导出的是变量的句柄（或引用），概念类似于 C 语言指针或 C++ 变量别名。这意味着，导入模块在获取该变量时，对其操作实际上是在操作原导出变量本身。

而值是一份数据，也可以理解为 export default 导出的是一份数据拷贝。

扩展

一、js 中声明变量的几种方式

var、let、const
function
class
import（准确来说并未创建新变量，但该关键字导入了被导入模块变量的引用，在 JavaScript 引擎层面并未声明新变量）

注意：

// main.js
export { default as a } from 'xxx/a.xxx'

这种情况下，a 这个变量在 main.js 这个模块中是访问不到的。如果想要在 main.js 这个模块中访问到 a 模块，需要使用 import 语句进行导入，再使用 export 暴露给外界。

// main.js
import a from 'xxx/a.xxx'
export a

二、堆栈内存

堆内存：存放引用类型的数据，例如对象、数组等
栈内存：存放基本数据类型和引用类型的地址（存放占用空间固定的数据）

ES module 和 CommonJS

1、实现层面

ES module 和 CommonJS 较大的一个区别在于：一个是官方规范，一个是社区规范。官方规范自然能得到 JavaScript 语法层面的实现支持，而社区规范只能通过在现有语法基础上扩展来实现。

2、单独导出和默认导出

CommonJS 的实现其实很简单，查看 webpack 的打包结果即可知。其核心原理是将各个模块放入函数中运行，利用函数作用域的特点实现模块间的环境隔离。因此在 CommonJS 中，module.exports 和 exports 本质上是同一个对象，即该模块（函数）运行时 return 的对象。

而 ES Module 则不同，export 和 export default 有着本质差别：一个导出变量的句柄，一个导出变量的值。

扩展（关于 export 导出的细节）

关于 export 导出，除了下面常用的方式：

// a.js
export let a = 1

还有一种方式：

// b.js
let b = 1
export { b }

而这两种模块的导入方式都是一样：

import { a } from 'xx/a.js'
import { b } from 'xx/b.js'

既然前面说了，export 导出的是变量的句柄，那么显然下面这种方式是要报错的：

// b.js
export { b: 1 } // SyntaxError: Unexpected token ':'

因为导入方式一样，那么很自然我就想测试一下，我按照下面这种方式来测试一下看会不会产生冲突

let b = 1
export { b }
export let b = 2 // SyntaxError: Identifier 'b' has already been declared

很显然使用 let、const 这样的关键字会产生一个重复定义的冲突，那么我们再试一下另外一个可以让我们多次重复声明同一个变量的 var 关键字。

var b = 1
export { b }
export var b = 2 // SyntaxError: Duplicate export of 'b'

改成 var 之后，不会在一开始编辑器就提示我们错误了，而是在运行时，报一个重复导出的错误。所以通过测试，这两种 export 导出方式还是不会产生冲突的。

3、动态导入

CommonJS 动态导入就很简单，其实就是运行函数。其实 CommonJS 导入本身就是在运行函数，所以动态或者静态其实都一样。

const a = require('xxx/a.js')

ES module 动态导入，那就需要语法的支持，使用下面这种语法：

const a = await import('xxx/a.js')

关于 Tree Shaking 的思考

我们知道，ES module 是支持 Tree Shaking 的，但是 CommonJS 是不支持的。

其实 Tree Shaking 面临的核心困难就是怎么确定一个函数或者模块它是否包含副作用。如果写的都是纯函数，那么 Tree Shaking 其实是很实现的。那么像有些函数，在编译时直接可以运行函数得到调用结果，进而在生产运行时，直接省去求值的耗时。

所以 Tree Shaking 的核心是在于副作用的检测，特别是在复杂的模块引用关系里面，确定每个模块里的某些内容是否存在副作用。另外为了更好的 Tree Shaking，比较推荐的方案是使用 ES module，并且使用 export 导出，这方式可以更好的进行 Tree Shaking。

以上就是探索export导出一个字面量会报错export default不会报错的详细内容，更多关于export导出字面量的资料请关注本站其它相关文章！

深入理解 ES Module 中 export 与 export default 的区别

核心

分析