[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 认为很怪异。

(备注：上述的 Dave 全名叫 David Herman，是《Effective JavaScript》的作者)

来自 stackoverflow 的回答：

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

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

总结

根据查阅的资料汇总来看， export default var/let/const 这种写法之所以会报错，主要是因为官方认为这种写法有一些不好的地方，就没有被采纳到 ES 的语法中，所以这样使用就会报错。

参考资料

• ES Discuss：esdiscuss.org/topic/why-i…
• mozilla： mail.mozilla.org/pipermail/e…
• stackoverflow: Why Is Export Default Const invalid? stackoverflow.com/questions/3…