五、模块化

1.相关配置

2.前端领域中的模块化标准

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

注意：导入模块时，不要添加后缀名ts，因为导入导出代码会进行编译的，导致编译时找不到文件。

3.编译结果中的模块化

可配置 tsconfig.json 文件

{
  "module": "commonjs",
  "module": "es6",  // 编译前和编译后无变化
  "removeComments" : true, // 编译结果中移除注释
  "esModuleInterop": true, // 启用es模块化交互非es模块导出
}

导入编译前：

import { name, sum } from './myModule'
import obj from "./myModule"
console.log(name);
console.log(sum(3, 5));
console.log(obj);
console.log(obj.name);

导入编译后：

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const myModule_1 = require("./myModule");
const myModule_2 = __importDefault(require("./myModule"));
console.log(myModule_1.name);
console.log((0, myModule_1.sum)(3, 5));
console.log(myModule_2.default);
console.log(myModule_2.default.name);

导出编译前：

export const name: string = "kevin"
export function sum(a: number, b: number): number {
  return a + b;
}
export default {
  name: "zhangsan",
  age: 23
}

导出编译后：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.sum = exports.name = void 0;
exports.name = "kevin";
function sum(a, b) {
    return a + b;
}
exports.sum = sum;
exports.default = {
    name: "zhangsan",
    age: 23
};

4.解决默认导入的错误

在导入node内置模块时，比如 import fs from "fs"

由于 fs 是node内置模块，故它导出的是module.export对象，而不是默认导出。

因此用ES6模块化默认导出（ import fs from "fs"）时会报错。

解决办法1：

import * as fs from "fs"

解决办法2：

启用es模块化交互非es模块导出，且module为CommonJS

{
  "module": "CommonJS",
  "esModuleInterop": true, // 启用es模块化交互非es模块导出
}

编译前：

import fs from "fs"
console.log(fs);

编译后：

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"));
console.log(fs_1.default);

5.TS中书写commonjs模块化

• 会导致类型检查失效。
• 以下写法不会

export = {
  name: "kevin",
  sum(a: number, b: number) {
    return a + b
  }
}
import obj = require("./commjs")
console.log(obj);

6.模块解析

应该从什么位置寻找模块

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

• classic：经典
• node：node解析策略

{
  "module": "commonjs",
  "moduleResolution": "node" // 设置解析模块的模式
  "removeComments" : true, // 编译结果中移除注释
  "esModuleInterop": true, // 启用es模块化交互非es模块导出
}