JavaScript 中的模块化 (2)

模块加载相对更快 这是 CommonJS 在服务端更流行的原因。

ES6 模块的导入导出

ES6 模块结合了CommonJS 和 AMD 的有点，具体如下：

与 CommonJS 类似，ES6模块语法相对简单，并且基于文件（每一个文件就是一个模块）

与 AMD 类似，ES6 模块支持异步加载模块。

既 ES6 结合了两种模块化的有点，基于文件系统，，因为浏览器并没有实现 ES6 的模块化 API 所以具体是异步还是同步取决于

ES6 模块的主要思想是必须显示的使用标志符导出模块，才能从外部访问模块。其他标志符，甚至在最顶级作用域中定义的标识符，只能在模块中使用。 ES6 引入两个关键字：

export ---- 从模块外部指定标识符。

import ---- 导入模块标识符。

从index.js模块中导出：

  const hello = 'hello';
  export const name = 'yunfly'

  export function sayHi(){
    return `${hello} ${name}!`
  }

也可以在模块最后一起导出：

  // foo.js
  const hello = 'hello';
  export const name = 'yunfly'

  export function sayHi(){
    return `${hello} ${name}!`
  }

  export { name, sayHi }

  // export { name as firstName, sayHi }
  

  // bar.js

  // 使用 as 设置导如别名
  import { name as firstName, sayHi } from 'foo'

  console.log(name)
  sayHi()

  //bar2.js
  // 导出全部标识符：
  import * as sayModule from 'foo';

  console.log(sayModule.name)
  sayModule.sayHi()

默认导出

// foo.js
class Foo {}

export default Foo


// bar.js
import Foo from './foo';

这存在一些可维护性的问题：

如果你在 foo.ts 里重构 Foo，在 bar.ts 文件中，它将不会被重新命名；

如果你最终需要从 foo.ts 文件中导出更多有用的信息（在你的很多文件中都存在这种情景），那么你必须兼顾导入语法。

在 ts 中默认导出的可发现性非常差，你不能智能的辨别一个模块它是否有默认导出。