ES6的模块

导出

  1. // 单独导出
  2. export let a = 1
  4. // 批量导出
  5. let b = 2
  6. let c = 3
  7. export { b, c }
  9. // 导出接口
  10. export interface P {
  11.     x: number;
  12.     y: number;
  13. }
  15. // 导出函数
  16. export function f() {}
  18. // 导出时起别名
  19. function g() {}
  20. export { g as G }
  22. // 默认导出，无需函数名
  23. export default function () {
  24.     console.log("I'm default")
  25. }
  27. // 导出常量
  28. export const str = 'Hello'
  30. // 引入外部模块，重新导出
  31. export { str as hello } from './b'

导入

  1. import { a, b, c } from './a'   // 批量导入
  2. import { P } from './a'         // 导入接口
  3. import { f as F } from './a'    // 导入时起别名
  4. import * as All from './a'      // 导入模块中所有成员，绑定在 All 上
  5. import myFunction from './a'    // 不加{},导入默认
  7. console.log(a,b,c)
  9. let p: P = {
  10.     x: 1, 
  11.     y: 1
  12. }
  13. console.log(All)
  14. myFunction()

CommonJS(Node)模块

导出

  1. let a = {
  2.     x: 1,
  3.     y: 2
  4. }
  6. // 整体导出
  7. module.exports = a
  9. // exports === module.exports
  10. // 导出多个变量
  11. exports.c = 3
  12. exports.d = 4

导入

  1. let c1 = require('./a.node')
  2. let c2 = require('./b.node')
  4. console.log(c1, c2)

两个配置项

在ts中可以用ts-node插件直接运行ts文件
在生产环境中，两个系统模块会编译成什么？
在tsconfig.json中，target配置项表示的是要编译的目标语言是什么版本，ts中生成的target默认值是es5
module配置项是把我们的代码编译成什么模块系统，ts中module默认值是commonjs
在命令行中tsc的默认值是es3，在使用tsc时，默认忽略tsconfig配置文件

  1. tsc ./src/es6/a.ts -t es3
  2. tsc ./src/es6/a.ts -t es5
  3. tsc ./src/es6/a.ts -t es6
  4. // -t: -target 
  5. tsc ./src/es6/a.ts -m amd
  6. tsc ./src/es6/a.ts -m umd
  7. // -m: -module

这里，会有两个模块的系统兼容问题，在编译的时候，默认会把所有模块编译成commonjs，这时就会对导入导出做一些特殊的处理
处理es6中的默认导出，不再试顶级属性，在导入的时候同样
在es6中，允许有次级的导出，在commonjs中，只允许模块有一个顶级导出（module.exports）,如果一个模块有多个次级导出，再出现一个顶级导出，则会覆盖前面的次级导出,在es6中则不会出现这种问题
但是一个模块用es6的方式做了默认导出，另一个模块用非es6的方式做了导入，就会产生问题
esModuleInterop 配置项如果开启的话，就允许export =的方式导入，也可以export from的方式导入