Typescript配置文件(tsconfig.json)详解系列三：module(二)

系列文章会一直更新，大家可以收藏加关注。不懂的可以在评论区留言。

接上文：Typescript配置文件(tsconfig.json)详解系列三：module(一)-CSDN博客

Typescript版本

Typescript

5.5.2

None

这个我个人理解应该是不允许使用模块系统，但是实际上他会将ESM和Commonjs都编译成Commonjs。

Typescript官网文档也是编译成了Commonjs但是没有解释：

同时也在Github上搜到了一个相关问题：

No error using imports/exports with --module=none and --target=es2015+ · Issue #39603 · microsoft/TypeScript · GitHub

但是如果配合target就可以正常提示

{
    compilerOptions: {
        "target": "ES5", 
        "module": "None"
    }
}

 报错如下：

ts/esm.ts:1:1 - error TS1148: Cannot use imports, exports, or module augmentations when '--module' is 'none'.

1 export const b = 2;
  ~~~~~~~~~~~~~~~~~~~


Found 1 error in ts/esm.ts:

根据错误搜索了一下Typescript的代码，发现确实是小于ES2015才会报这个错误

Preserve

Typescript中使用的ESM和CommonJS（编译成正常的CommonJS语法，而不是Typescript中使用的）模块系统会被保留。该方案使用的环境是Typescript作为预编译器，后续会将编译的JS文件交给其他编译器处理（babel等），多用在webpack，rollup等打包工具中。相当于不处理模块系统，交给后续编译器处理。

因为该参数是Typescript5.4才引入的，所以三大框架脚手架并没有使用。

Typescript代码如下：

// cjs.ts
// typescript中的commonjs导出方式
export = {
    a: 1
}

// esm.ts
export const b = 2;

// index.ts
import {b} from './esm';
// typescript中的commonjs导入方式
import a = require('./cjs');

console.log(a, b)

编译后的代码如下，保留了原汁原味：

// cjs.js
module.exports = {
    a: 1
};

// ejs.js
export const b = 2;

// index.js
import { b } from './esm';
// typescript中的commonjs导入方式
const a = require("./cjs");
console.log(a, b);