九、ES6与CommonJS的模块系统

# 九、ES6与CommonJS的模块系统

# ES6的模块

# 导出

// 单独导出
export let a = 1

// 批量导出
let b = 2
let c = 3
export { b, c }

// 导出接口
export interface P {
    x: number;
    y: number;
}

// 导出函数
export function f() {}

// 导出时起别名
function g() {}
export { g as G }

// 默认导出，无需函数名
export default function () {
    console.log("I'm default")
}

// 导出常量
export const str = 'Hello'

// 引入外部模块，重新导出
export { str as hello } from './b'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 导入

import { a, b, c } from './a'   // 批量导入
import { P } from './a'         // 导入接口
import { f as F } from './a'    // 导入时起别名
import * as All from './a'      // 导入模块中所有成员，绑定在 All 上
import myFunction from './a'    // 不加{},导入默认

console.log(a,b,c)

let p: P = {
    x: 1, 
    y: 1
}
console.log(All)
myFunction()

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# CommonJS(Node)模块

# 导出

let a = {
    x: 1,
    y: 2
}

// 整体导出
module.exports = a

// exports === module.exports
// 导出多个变量
exports.c = 3
exports.d = 4

1
2
3
4
5
6
7
8
9
10
11
12

# 导入

let c1 = require('./a.node')
let c2 = require('./b.node')

console.log(c1, c2)

1
2
3
4

# 两个配置项

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

tsc ./src/es6/a.ts -t es3
tsc ./src/es6/a.ts -t es5
tsc ./src/es6/a.ts -t es6
// -t: -target 
tsc ./src/es6/a.ts -m amd
tsc ./src/es6/a.ts -m umd
// -m: -module

1
2
3
4
5
6
7

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

#语言 #TypeScript

上次更新: 2021/04/22, 00:08:06

← 八、高级类型十、使用命名空间→