TS学习4-模块化

ops/2024/11/9 17:08:27/

目录

  • 1,ts 中如何使用模块化
  • 2,编译结果中的模块化
    • 2.1,使用 node 模块的问题
  • 3,模块解析的策略

一些用到的配置项:

配置名称含义常见取值
module设置编译结果中,使用的模块化标准es6commonjs
moduleResolution设置解析模块的模式node
alwaysStrict编译结果中不包含 "use strict",(旧版 ts 该配置项是 noImplicitUseStricttruefalse
removeComments编译结果中,移除注释truefalse
noEmitOnError发生错误时,不生成编译结果truefalse
esModuleInterop启用 es 模块化交互,但导出使用非 es 模块truefalse

1,ts 中如何使用模块化

导入导出,统一使用 es6 模块化标准即可。

2,编译结果中的模块化

如果在 ts 中使用 es6 模块化标准,在编译为 js 时:

  • 配置 modulees6 时,结果无变化
  • 配置 modulecommonjs 时,导出的声明会变成 exports 的属性,默认导出会变成 exportsdefault 属性。

也可以用这一特性,来对比 es6 和 commonjs 的写法区别。

2.1,使用 node 模块的问题

import fs from "fs";
fs.readFileSync('./') 

编译为 commonjs 后(node 使用的 commonjs )

const fs_1 = require("fs");
fs_1.default.readFileSync('./');

原因:node 模块不是 ts 写的,而且 fs 并不是默认导出。

另外,需要安装 @types/node 才有智能提示。

3种解决办法

1,

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

2,

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

前2个编译为 commonjs 后:

const fs_1 = require("fs");
fs_1.readFileSync('./');

3,配置 esModuleInterop: true,则可以直接 import fs from "fs"; 这样使用了。

编译为 commonjs 后,可以看到 __importDefault 函数返回了一个对象,对象的 default 属性值是require("fs"),所以 fs_1.default.readFileSync('./'); 就可以正常使用了。

var __importDefault = (this && this.__importDefault) || function (mod) {return (mod && mod.__esModule) ? mod : { "default": mod };
};
const fs_1 = __importDefault(require("fs"));
fs_1.default.readFileSync('./');
console.log('1');

3,模块解析的策略

很早之前 ts 版本使用的是 classic 经典模式,在 es6 和 node 出来之后,大多都会使用 node 解析策略。

  • 相对路径:require('./xxx')
    • 先找引入路径目录下,也就是当前目录;
    • 再找引入路径目录下的 package.json 中的 main 字段;
    • 再找引入路径目录下的 index.ts
  • 非相对路径:require('xxx')
    • 找的是 node_modules 目录下的模块。从当前目录逐层往上查找 node_modules 目录,一直到项目根目录。

以上。


http://www.ppmy.cn/ops/14908.html

相关文章

2、Flink DataStreamAPI 概述(下)

代码示例 Maven 依赖 <dependencies><dependency><groupId>org.apache.flink</groupId><artifactId>flink-streaming-java</artifactId><version>1.19.0</version></dependency><dependency><groupId>org…

二叉树的(前,中,后序)遍历

1&#xff0c;二叉树的概念 二叉树是一种重要的数据结构&#xff0c;它由节点组成&#xff0c;每个节点最多有两个子节点&#xff0c;分别称为左子节点和右子节点。二叉树具有以下特点&#xff1a; 1. **根节点&#xff08;Root&#xff09;**&#xff1a;二叉树的顶端节点称…

浏览器弹出“您与此网站的建立的连接不安全”怎么办——三步消除此提示

您的网站是否会弹出下面这样的弹窗&#xff1f;应该怎么消除&#xff1f; 解决方案如下&#xff08;不需要花一分钱&#xff09;&#xff1a; 1 启用https 如果您还在使用http协议&#xff0c;那基本上所有的主流浏览器都是都不安全提示需要给网站安装部署一个SSL证书&#xff…

CSS_sass模块化、scss模块化

import 1、运行时语法&#xff1a; import url(xxxxxx.css); // 编译后 import url(xxxxxx.css);2、编译时语法&#xff1a; 编译后&#xff1a;生成的css文件就会包含common.scss里面的代码,自然可以使用common里面的css变量 // common.scss $color: redimport "./com…

C++: IO流

目录 1、C语言输入输出 流的概念&#xff1a; 2、CIO流 3、C文件IO流 1、C语言输入输出 C语言中我们用到的最频繁的输入输出方式就是scanf () 与 printf() 。 scanf(): 从标准输入设备 ( 键 盘 ) 读取数据&#xff0c;并将值存放在变量中 。 printf(): 将指定的文…

c++中的数组

一、概述 概念&#xff1a;所谓数组&#xff0c;就是一个集合&#xff0c;里面存放了相同类型的数据元素 特点1&#xff1a;数组中的每个数据元素都是相同的类型 特点2&#xff1a;数组是由连续的内存位置组成的 二、一维数组 2.1 一维数组的定义方式 数据类型 数组名 […

数据可视化(六):Pandas爬取NBA球队排名、爬取历年中国人口数据、爬取中国大学排名、爬取sina股票数据、绘制精美函数图像

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

# 从浅入深 学习 SpringCloud 微服务架构(六)Feign(2)

从浅入深 学习 SpringCloud 微服务架构&#xff08;六&#xff09;Feign&#xff08;2&#xff09; 一、feign 的配置&#xff1a; 1、从 Spring Cloud Edgware 开始&#xff0c;Feign 支持使用属性自定义 Feign。 对于一个指定名称的 FeignClient&#xff08;例如该 Feign …