【Vite + Vue + Ts 项目三个 tsconfig 文件】

Vite + Vue + Ts 项目三个 tsconfig 文件

  • [为什么 Vite + Vue + Ts 项目会有三个 tsconfig 文件?](#为什么 Vite + Vue + Ts 项目会有三个 tsconfig 文件?)
  • [首先我们先了解什么是 tsconfig.json ?](#首先我们先了解什么是 tsconfig.json ?)

为什么 Vite + Vue + Ts 项目会有三个 tsconfig 文件?

复制代码
在使用 Vite 创建 vue-ts 模板的项目时,会发现除了 tsconfig.json 外,还有一个 tsconfig.node.json 和 tsconfig.app.json 文件。并在 tsconfig.json 使用了 references 字段引用了其他两个文件
json 复制代码
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

首先我们先了解什么是 tsconfig.json ?

txt 复制代码
tsconfig.json 是 TypeScript 项目的配置文件,放在项目的根目录。主要供tsc编译器使用。 简单的用例:
json 复制代码
{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}
txt 复制代码
示例的四个属性的含义。

include:指定哪些文件需要编译。
allowJs:指定源目录的 JavaScript 文件是否原样拷贝到编译后的目录。
outDir:指定编译产物存放的目录。
target:指定编译产物的 JS 版本。

TypeScript 3.0 新增的 项目引用(Project References) 功能,它允许用户为项目的不同部分使用不同的 TypeScript 配置。

txt 复制代码
关于 tsconfig.node.json, 注意到 "include": ["vite.config.ts"] 这段代码,它说明 tscnofig.node.json 是专门用于 vite.config.ts 这一文件的 TypeScript 配置文件。
关于 tsconfig.app.json, 注意到 "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] 这段代码,它说明 tscnofig.app.json 是专门用于 src 代码文件的。

故而,如果要控制 src 文件夹下的文件的编译行为的时候,就需要在 tsconfig.app.json 文件中添加对应的配置;反之,如果要控制 vite.config.ts 的编译行为就在 tsconfig.node.json 中添加配置。
txt 复制代码
实例:vite+ts+vue 项目,使用 Vuex 库的时候出现 无法找到模块"vuex"的声明文件。 的问题

在 tsconfig.app.json 中添加 "vuex":["./node_modules/vuex/types"], 即可。
json 复制代码
{
  "compilerOptions": {

    "paths":{
      "vuex":["./node_modules/vuex/types"],
    },
  }
}

```txt
"vuex":["./node_modules/vuex/types"]:
这里定义了一个路径映射规则。它告诉 TypeScript 编译器,当代码中导入(import)vuex 模块时,实际上应该从 "./node_modules/vuex/types" 路径下查找模块。这通常用于确保 TypeScript 能够正确地找到和解析 vuex 的类型定义。
txt 复制代码
故而,我们可以认为 tsconfig.node.json 和 tsconfig.app.json 只是作用在不同文件范围的编译配置文件。如果按照以往的单个 tsconfig.json 配置的形式就无法根据模块或者部分文件进行特殊的编译处理。

原文链接https://juejin.cn/post/7431336795126054953

相关推荐
百花~2 分钟前
前端三剑客之一 CSS~
前端·css
青天诀4 分钟前
React 中 setTimeout 获取不到最新 State 的原因及解决方案
前端·react.js
拉不动的猪5 分钟前
闭包实际项目中应用场景有哪些举例
前端·javascript·面试
专注前端30年7 分钟前
【Vue2】基础知识汇总与实战指南
开发语言·前端·vue
西木之斤9 分钟前
vue和react实例简单对比
vue.js·react.js
懵圈9 分钟前
第02章:使用Vite初始化项目
前端
CodeCraft Studio12 分钟前
前端表格工具AG Grid 34.3 发布:重磅引入AI工具包,全面支持 React 19.2!
前端·人工智能·react.js·angular·ag grid·前端表格工具·透视分析
剑小麟12 分钟前
maven中properties和dependencys标签的区别
java·前端·maven
西洼工作室13 分钟前
优化网页性能指标:提升用户体验的关键
前端·css
掘金一周19 分钟前
第一台 Andriod XR 设备发布,Jetpack Compose XR 有什么不同?对原生开发有何影响? | 掘金一周 10.30
前端·人工智能·后端