TypeScript中的模块化-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1157 天，文章内容可能已经过时。

TS中如何书写模块化语句

TS中，导入和导出模块，统一使用ES6的模块化标准，例如：

// module.ts
export const name = "LINNYUU";

1
2

// index.ts
import { name } from "./module";

console.log(name);

1
2
3
4

注意

在引入模块时不能加上后缀名，例如：import { name } from “./module.ts”;
这样会报错，因为引入模块的语句是会参与编译的，最后会编译成js，在js中是没有ts的文件后缀的
TypeScript中的模块化

编译结果中的模块化

TS中可以配置编译的结果为es6或者commonjs

{
  // 编译配置
  "compilerOptions": {
    "module": "commonjs", // 编译目标使用的模块化标准
		// "module": "es6"
  },
}

1
2
3
4
5
6
7

TS中的模块化在编译结果中：

如果编译结果的模块化标准是es6：没有区别

// module.ts
export const name = "LINNYUU";

export function sum(a: number, b: number): number {
  return a + b;
}

export default function () {
  console.log("hello");
}

// index.ts
import hello, { name, sum } from "./module";

console.log(name);
console.log(sum(1, 2));
hello();

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

编译后：

// module.js
export const name = "LINNYUU";
export function sum(a, b) {
    return a + b;
}
export default function () {
    console.log("hello");
}


// index.js
import hello, { name, sum } from "./module";
console.log(name);
console.log(sum(1, 2));
hello();

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

如果编译结果的模块化标准是commonjs：导出的声明会变成exports的属性，默认的导出会变成exports的default的属性

// module.js
Object.defineProperty(exports, "__esModule", { value: true });
exports.sum = exports.name = void 0;
exports.name = "LINNYUU";
function sum(a, b) {
    return a + b;
}
exports.sum = sum;
function default_1() {
    console.log("hello");
}
exports.default = default_1;

// index.js
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const module_1 = __importStar(require("./module"));
console.log(module_1.name);
console.log((0, module_1.sum)(1, 2));
(0, module_1.default)();

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
32
33
34
35
36
37
38

之前的文件使用的是commonjs的导出，现在使用ES6的导入导致报错怎么办？

例如：导入fs模块

import fs from "fs";

TypeScript中的模块化

这里会显示模块fs没有默认导出，因为fs模块中使用的是commonjs的导出module.exports，而es6中的导入import是默认导入

Object.defineProperty(exports, "__esModule", { value: true });
const fs_1 = require("fs");
fs_1.default.readFileSync("./index.ts");

1
2
3

可以看到在打包结果中到还是到default中去寻找 readFileSync 方法，里面肯定没有这个方法所以会报错

解决方法

使用部分导出

import { readFileSync } from "fs";
readFileSync("./index.ts");

1
2

可以看到打包结果没有到default中找 readFileSync 方法

// 打包结果
Object.defineProperty(exports, "__esModule", { value: true });
const fs_1 = require("fs");
(0, fs_1.readFileSync)("./index.ts");

1
2
3
4

如果一定要使用默认导入，可以使用别名默认导出

import * as fs from "fs";
fs.readFileSync("./index.ts");

1
2

// 打包结果
Object.defineProperty(exports, "__esModule", { value: true });
const fs = require("fs");
fs.readFileSync("./index.ts");

1
2
3
4

使用TS中的配置

{
  // 编译配置
  "compilerOptions": {
    "esModuleInterop": true // 启用es模块化交互非es模块导出
  },
}

1
2
3
4
5
6

开启这个配置之后，就可以直接使用es6的默认导入

import fs from "fs";
fs.readFileSync("./index.ts");

1
2

// 打包结果
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const fs_1 = __importDefault(require("fs"));
fs_1.default.readFileSync("./index.ts");

1
2
3
4
5
6
7

模块解析

模块解析：应该从什么位置寻找模块

TS中，有两种模块解析策略

classic：经典
node：node解析策略(唯一的变化，是将js替换成ts)
- 相对路径require("./xxx")
- 非相对路径require("xxx)