[JavaScript知识库]ES6 模块使用问题解析

ES6 引入模块化概念之后，JavaScript 便成了新时代浪客。

在使用过程中，发现一些问题存在，或者说不理解的地方，我在此做一个汇总。

并不涉及 commonjs，只针对于 import 与 export

以 React 为例

导出一个函数组件，常规写法：

export default function App() {
  return (
    <div>
      <h1>APP</h1>
    </div>
  )
}

这里我可以选择将函数名抹掉，没有问题。

export default function () {
  return (
    <div>
      <h1>APP</h1>
    </div>
  )
}

这种写法与前者相比，可以观察到的一个不同点就在浏览器 React 开发者工具当中，组件名成了 default。

其次，默认导出通常写在文件末尾处，方便观察，这是一条最佳实践，所以需要改写一下。

function App() {
  return (
    <div>
      <h1>APP</h1>
    </div>
  )
}

export default App

早期我的写法，更多时候是第一段示例当中那样，将导出与函数定义写成一行，不为别的，就是看着代码行数少。后续阅读一些源码时，发现更多是将默认导出写在最后，于是选择了这种写法，跟着大佬走。

继续往下探索

只探讨当中出现的问题，而不是实用性

接着上面的示例继续，若是追求精简，改写为箭头函数。

const App = () => (
  <div>
    <h1>APP</h1>
  </div>
)

export default App

极致写法

export default () => (
  <div>
    <h1>APP</h1>
  </div>
)

可是如果写成这样，就不行了。

export default const App = () => (
  <div>
    <h1>APP</h1>
  </div>
)

事实上，如果将 default 给去除，这条导出又能行了，加上前面成功的默认导出，这种表现使错误更加迷惑不解，我在论坛当中找到了这个答案。

https://stackoverflow.com/questions/36261225/why-is-export-default-const-invalid

首先需要清楚，每一个文件只能一个默认导出，想要默认导出多个数据，则需要使用对象。

对于变量声明，我们通常一条一条写，不过是可以使用逗号分隔，一次声明多个变量

const a = 1
const b = 2

const c = 3,
      d = 4

如果真的声明多个变量，默认导出的规矩就被破了。为了防止这种情况的发生，export default 与变量声明不能存在同一行。

export 没问题，它是可以接受多个导出的。

再看另一个无法生效的场景

import store from "./store"

// bad
export store

import store from "./store"

export default store

前者为什么会无法生效，讲道理的话，它好歹是另一个文件当中导入的，通过名称导出不是正好吗？

换一个场景，能够更好的体现这一点。

const store = 10  

// bad
export store

要是一个对象也就罢了，可是如果是一个简单类型怎么办呢？另一边就没办法接收了

export 10

对于简单类型，只能以对象，或者默认形式导出

const store = 10  

export {
  store
}

对于默认导入的数据，只能再次默认导出，否则加上 {}，这能加上一个对应的 key 值。

我在浏览一些库的时候，发现了这样的一种写法

export { default as store } from "./store"

这是一种组合写法，导入目标文件默认导出的同时，给其取一个名，并在当前文件导出，也就是中转站玩法，不带任何二次处理的

import store from "./store"
export { store }