[TOC]

前言

本文的中心思想是，要归纳下网上关于 JS ES6 模块默认导出的一种错误写法的原因解释的讨论。在讨论这个错误写法之前，我们先看下
JS ES6 模块的默认导出语法的一个正确的例子, 如下：

我们有两个js文件 a.js 和 b.js:

b.js 里定义了一个变量 name 并导出
a.js 导入b.js里定义的变量 name 并使用。

使用默认导出语法（export default) 时的正确写法如下：
b.js:

let name = 'Jack'; // (let 替换为 var, const都可以）
export default name;
复制代码

a.js:

import name from './b.js';
console.log(name);
复制代码

运行结果：

修改为 `export default var/let/const...` 的写法的运行结果会报错

如果我们对前言中的例子加以修改，改为使用类似于 export default var/let/const... 这样的写法，运行后会发现报错了。

我们将 b.js的内容分别修改为如下三种写法，会发现每种写法都会报错：

写法一： export default var

export default var name = 'Jack';
复制代码

运行结果：

写法二： export default let

export default let name = 'Jack';
复制代码

运行结果：

写法三： export default const

export default const name = 'Jack';
复制代码

运行结果：

为什么`export default var/let/const...` 的写法会报错

关于这个问题，我在网上找了些资料，找到如下两个重要的资料：

ES Discuss 网站上关于对 ECMAScript 提案讨论的邮件内容的汇总贴：
esdiscuss.org/topic/why-i…
该帖子是将 mozilla 网站上关于这个主题的一系列零散的来往邮件，以盖楼的形式汇总在一个页面里，以便读者更容易阅读。mozilla 网站上包含原始的零散邮件的网址是：
mail.mozilla.org/pipermail/e…
stackoverflow: Why Is Export Default Const invalid?
stackoverflow.com/questions/3…

由于水平有限，我只列举一些我能看懂并且对本问题有重要解答意义的回答。

如上图，这个帖子的意思是，
有如下提问：

var a = 1; export default a; 这样的写法是ok的
但将这两句代码结合成一句来写成 export default var a = 1; 的形式，就是错误的。为什么？

Dave的回答是，export default a 这句话

创建了一个名为 default 的变量，该变量最终会被导出
该变量被导出前，我们会为该变量赋初始值，初始值是一个表达式，这里只是凑巧该表达式就是变量 a 的数值。

为了解释上述两点，Dave说， export default a 从含义上可以理解为 export default = a，只是他没有极力去推动这种写法，所以最终没有被纳入ES的语法中。按照这种带有 = 赋值符的理解法，那么 export default var a 就等效于 export default = var a 的写法，赋值表达式的右边又是一个变量的声明，这种写法被 Dave 认为很怪异。

来自 stackoverflow 的回答：

这个回答的意思是，和前边 Dave 的解释类似，

export default Foo 这句话中的 default 是一个变量，并且是一个赋值表达式, 所以 export default Foo 可以等效于 export const default = Foo
按照1的等效写法，export default const Foo = 1; 就等效于 export const default = const Foo = 1; ，这种写法同时包含了变量的定义（default和 Foo)、变量的赋值 (为 default和 Foo)和变量的导出, 这么多含义同时写在一个语句中，是一种没有意义的用法。