TypeScript名词解释系列 -- tsconfg中的target，module和moduleResolution

最新推荐文章于 2024-05-27 08:04:08 发布

Justinjiang1314

最新推荐文章于 2024-05-27 08:04:08 发布

阅读量5.2k

点赞数 1

分类专栏： Java 文章标签： typescript

本文链接：https://blog.csdn.net/Justinjiang1314/article/details/106710702

版权

Java 专栏收录该内容

7 篇文章

订阅专栏

tsconfg中的target，module和moduleResolution

target --

就是TypeScript文件编译后生成的javascript文件里的语法应该遵循哪个JavaScript的版本。可选项为："ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017"或 "ESNext"

module --

就是你的TypeScript文件中的module，采用何种方式实现，可选项为："None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015"。具体每一个module的定义，请参考链接：

https://medium.com/computed-comparisons/commonjs-vs-amd-vs-requirejs-vs-es6-modules-2e814b114a0b

moduleResolution --

就是告诉TypeScript编译器，采用何种方式解析（也就是查找）TypeScript文件中依赖的模块的位置，可选项为：Classic和Node，具体定义，请参考链接：

https://www.tslang.cn/docs/handbook/module-resolution.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Justinjiang1314

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

webpack入门之模块解析(module-resolution)

蛐蛐的博客

07-31

370

文档：https://webpack.js.org/concepts/module-resolution/ 1.简介 resolver 是一个库(library)，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用，如下 import foo from 'path/to/module' // 或者 require('path/to/module') 所依赖的模块可以是来自应用程序代码或第三方的库(library)。 resolver 帮助 webpa

【TypeScript】---配置选项

qq_53061847的博客

05-30

9879

目录一、编译自动编译文件自动编译整个项目二、配置选项的介绍 1. include（包含） 2. exclude（排除） 3.extends(延伸) 4. files(文件) 5. compilerOptions (编译器选项) target(项目编译) lib(库) module (模块) outDir(输出目录) outFile(输出文件) rootDir(根目录) checkJs 其他配置严格检查额外检查一、编译自动编译文件 ...

参与评论您还未登录，请先登录后发表或查看评论

webpack-Module Resolution（模块解析）

weixin_33967071的博客

02-26

738

模块解析(Module Resolution) resolver 是一个库(library)，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用，如下： import foo from 'path/to/module' // 或者 require('path/to/module') 所依赖的模块可以是来自应用程序代码或第三方的库(li...

tsconfig之moduleResolution详解

最新发布

17 的博客

05-27

2396

详细分析 ts 是如何解析路径的。moduleResolution 是 typescript 路径解析中最重要的一个配置。

typescript 文档阅读笔记 - Module Resolution

98猛虎的博客

04-25

347

默认情况下，模块查找方式有两种：classic、nodejs 的模块查找规则。typescript 的模块查找规则中模仿了 nodejs 的模块查找规则。对于使用相对路径进行导入的查找规则: 在 /root/src/moduleA.ts 中 import { b } from “./moduleB”，查找顺序如下 /root/src/moduleB.ts /root/src/moduleB.tsx /root/src/moduleB.d.ts /root/src/moduleB/package.json

Vue-cli3项目引入Typescript的实现方法

10-16

在Vue开发中，TypeScript的引入能够提供更好的类型安全性和代码规范性，尤其在大型项目中，它能显著提升开发效率并减少潜在的错误。Vue-cli3是Vue的官方脚手架，支持快速搭建基于Vue的项目。接下来，我们将详细讨论...

React Hook + TypeScript + styled-component 建站

尐轩web前端网络日志

06-08

1232

技术选型 Vue 与 React 的对比组件化 Vue 的组件化是将 UI 结构（template）、UI 样式（style）、数据与业务逻辑（script）都放在一个 .vue 的文件中，运行前 .vue 文件会被编译成真正的组件； React 的组件化是直接通过 JS 代码的形式实现组件模板引擎 Vue的视图模板使用类 HTML 的写法加上属性与指令，多数情况下要比 React 的 JSX 写法清晰且开发效率高，但是在复杂场景下，Vue 的写法有时会比 React 写起来更麻烦数据监听 Vue

vue cli4.0项目引入typescript的方法

10-15

"moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "allowJs": false, "noEmit": true, ...

浅谈TypeScript 用 Webpack/ts-node 运行的配置记录

11-26

在本文中，我们将深入探讨如何在Node环境中使用TypeScript，特别是如何通过Webpack和ts-node来配置和运行TypeScript代码。TypeScript是一种强大的编程语言，它为JavaScript提供了静态类型检查和其他高级特性，使得...

【Typescript】当moduleResolution= “Node16“时，import()方法导入的相对路径必须包含扩展名【而moduleResoluti=“bundler“时可以省略扩展名】

weixin_43343144的博客

04-08

1703

此外，如果你在编译 TypeScript 时遇到问题，可以检查你的 tsconfig.json 文件的配置，确保 compilerOptions 中的 moduleResolution 和 module 选项适合你的项目设置和目标运行环境。对于使用最新 Node.js 版本的项目，通常推荐的设置是 "moduleResolution": "node16" 或 "nodenext"，以及 "module": "ESNext"。注意：当前使用相对路径动态导入时【import(相对路径)方法时】必须配置。

【TS】ts项目vscode警告--- 找不到模块“xxx”。你的意思是要将 “moduleResolution“ 选项设置为 “node“，还是要将别名添加到 “paths“ 选项中

owo_ovo的博客

11-24

2711

ts项目vscode警告--- 找不到模块“xxx”。你的意思是要将 "moduleResolution" 选项设置为 "node"，还是要将别名添加到 "paths" 选项中

moduleResolution 总结

qq_39523606的博客

04-14

1782

模块化之争的在 ESM 标准出来的时候已成为定局，这两年前端界也在进行 ESM 大迁移。关于 ESM 个人感觉可以聊的并不多，最近讨论最多的可能还是到底该不该用 default import 以及它俩互相转换的各种坑。前不久 TS 发布了 5.0，引入了新的 moduleResolution：bundler。官方文档对此的描述非常简单，阅读完本文，你会对它的产生有更深刻的理解。什么是 modu...

TypeScript 模块那些事儿

小王的技术库

06-16

958

哈喽，大家好，我是 SuperYing。今天我们来聊聊 TypeScript 模块那些事儿。TypeScript 沿用了 ES6 的模块概念。模块只能在其自身的作用域内执行，而不是在全局作用域里。模块内的变量，函数，类等可以通过导出，也可以通过导入所需的其他模块内容。模块更形象的叫法应该是“文件模块”，任何包含 import 或 export 的文件，都会被识别为模块。相反，若一个文件中没有或，则该文件内容全局可见。导出导出语句重新导出，可以通过重命名变量并导出默认导

Typescript 5.0 发布：快速概览

欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。

05-21

6205

TypeScript 5.0 添加了几个新标志来自定义模块解析过程。这些标志提供了更细粒度的控制，以控制模块是如何解析的，使您能够微调构建过程。：允许导入带有 TypeScript 特定扩展名（如 .ts、.mts 或 .tsx）的 TypeScript 文件。：强制 TypeScript 在从 node_modules 中的包中读取时，查看 package.json 文件的 exports 字段。

TypeScript（十六）配置相关（tsconfig配置）

00后|互联网💻|办公室🍵茶农，希望通过技术改变生活|爱折腾💪|收集各类📚网络资源，好物不私藏，点点关注，不迷路。全网搜：阿宇的编程之旅 or 阿宇的宝库

05-08

2206

上篇文章，我们对TS配置中的命令行配置做了介绍，本文将对tsconfig.json配置做个解析tsconfig.json是TypeScript中用于配置编译器选项的配置文件。该文件通常位于TypeScript项目的根目录下，并告诉TypeScript编译器如何处理项目中的TypeScript文件。下面我将分享一些常用的配置，以及截止v5.3.3版本官方提供的配置参考常用配置全部配置

【TypeScript系列】模块解析

爱学习的小码农

03-20

1890

_模块解析_是指编译器在查找导入模块内容时所遵循的流程。假设有一个导入语句import { a } from "moduleA"; 为了去检查任何对a的使用，编译器需要准确的知道它表示什么，并且需要检查它的定义moduleA。这时候，编译器会有个疑问“moduleA的结构是怎样的？” 这听上去很简单，但moduleA可能在你写的某个.ts/.tsx文件里或者在你的代码所依赖的.d.ts里。

TypeScript - Modules

weixin_30785593的博客

05-22

标签： TypeScript (主要是来加深自己的理解，以机器翻译为主，有问题可以指出，十分感谢) 原文链接http://www.typescriptlang.org/Handbook#modules 这是cmd markdown中的链接点我点我，欢迎批注。这篇文章概括了在TypeScript中使用模块组织代码的各种方法。我们将包括内部模块和外部模块以及讨论如何恰当使用他们。我们还会介绍一些外...

TypeScript编译选项

m0_65912225的博客

03-12

656

编译单个文件：终端 tsc 文件名自动编译单个文件：终端 tsc 文件名 -w编译整个项目：tsc 前提是得有ts的配置文件tsconfig.json自动编译整个项目：tsc --wtsconfig.json默认文件内容：tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息对代码进行编译。注：路径 **表示所有目录 *表示所有文件"includes":[] //"includes"用来指定哪些ts文件需要被编译。

Vue2 Vue-cli中使用Typescript的配置详解

06-13

Vue2和Vue-cli中使用TypeScript需要进行一定的配置。下面是详细的配置步骤： 1. 安装TypeScript和相关依赖首先需要安装TypeScript和相关依赖： ```bash npm install typescript ts-loader ``` 2. 配置tsconfig.json 在项目的根目录下创建一个tsconfig.json文件，并进行如下配置： ```json { "compilerOptions": { "target": "es5", "module": "es2015", "strict": true, "jsx": "preserve", "moduleResolution": "node", "esModuleInterop": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } ``` 其中的配置项意义如下： - target: 编译后的JavaScript代码的目标版本 - module: 模块化方式 - strict: 开启TypeScript的严格模式 - jsx: 支持使用JSX语法 - moduleResolution: 模块解析方式 - esModuleInterop: 支持导入非ES6模块的默认导出 - baseUrl: 模块解析的基础路径 - paths: 模块解析的别名配置 3. 配置webpack 在webpack.config.js中进行如下配置： ```javascript module.exports = { // ... resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], alias: { '@': path.resolve(__dirname, 'src') } }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/] } } ] } // ... } ``` 其中的配置项意义如下： - extensions: 支持解析的文件扩展名 - alias: 模块解析的别名配置 - test: 匹配需要使用ts-loader处理的文件类型 - loader: 使用的loader - exclude: 排除不需要处理的文件夹 - options: ts-loader的配置项 4. 安装Vue的类型声明文件需要安装Vue的类型声明文件，使得TypeScript能够正确地识别Vue相关的API。 ```bash npm install @types/vue -D ``` 5. 在组件中使用TypeScript 在Vue组件中，需要使用.ts或者.tsx文件作为组件的文件后缀，然后在脚本中使用TypeScript进行编写，例如： ```vue <template> <div>{{ message }}</div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component export default class HelloWorld extends Vue { message: string = 'Hello, World!' } </script> <style> /* ... */ </style> ``` 这样就可以在Vue2和Vue-cli中使用TypeScript进行开发了。