【React 】react 创建项目配置 jsconfig.json 的作用

在 React 项目中,jsconfig.json 文件扮演着重要的角色,它主要用于配置 JavaScript 或 TypeScript 项目的根目录和其他一些选项,以帮助编辑器(如 VS Code)更好地理解项目的结构和提供智能提示。对于熟悉 Vue 的前端工程师来说,这个概念类似于 Vue 项目中的 .editorconfig 或者 tsconfig.json(对于 TypeScript 项目)。

jsconfig.json 的主要作用

  • 定义项目根目录 :通过指定 "baseUrl""paths",你可以帮助编辑器理解模块引用路径,使得导入语句更加简洁。
  • 配置编译选项 :虽然 React 项目通常使用 Babel 进行编译,但 jsconfig.json 可以用来设置一些 JavaScript 编译相关的选项,如严格模式、允许的语言特性等。
  • 提供智能提示 :当你在 VS Code 等支持该文件的编辑器中工作时,jsconfig.json 有助于提供更准确的代码补全、类型检查和其他智能提示功能。

示例:创建并配置 jsconfig.json

假设你的 React 项目结构如下:

复制代码
my-react-project/
├── src/
│   ├── components/
│   └── utils/
└── public/

你想要简化对 src/componentssrc/utils 目录的导入路径。你可以在项目根目录下创建一个 jsconfig.json 文件,并添加以下内容:

json 复制代码
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src"]
}

这样配置后,你就可以使用 @components/ComponentName@utils/utilityName 这样的路径来导入组件和工具函数了,比如:

javascript 复制代码
import MyComponent from '@components/MyComponent';
import myUtility from '@utils/myUtility';

这使得导入语句更加清晰,同时也方便了项目的维护。

注意事项

  • 确保你的编辑器支持 jsconfig.json 并正确配置了以利用这些功能。
  • 对于 TypeScript 项目,应使用 tsconfig.json 来代替 jsconfig.json,因为它提供了更多针对 TypeScript 的配置选项。

通过适当配置 jsconfig.json,你可以提升开发效率和代码质量,特别是在大型项目中,这将变得尤为重要。

个人推荐配置

js 复制代码
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "jsx": "preserve",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

配置解释:

  • target : "es5" 指定了输出的 ECMAScript 目标版本为 ES5。这意味着 Babel 或 TypeScript 编译器将会把你的代码转换成兼容 ES5 的语法,以确保在老旧浏览器中也能正常运行。

  • module : "esnext" 表示模块系统使用的是最新的 ECMAScript 模块标准(ESM)。这允许你使用 importexport 语句来导入和导出模块,而不是传统的 CommonJS 模块系统。

  • baseUrl : "./" 设置了基础路径,所有相对路径的导入都会以此作为起点。在你的配置中,它被设置为了当前目录,这意味着当你使用路径别名时,路径解析将从项目根目录开始。

  • moduleResolution : "node" 表示采用 Node.js 风格的模块解析策略。这意味着编辑器在查找模块时,将遵循 Node.js 的模块查找算法,即从当前文件夹开始向上查找 node_modules 目录。

  • paths : 这里定义了路径别名。"@/*" 表示任何以 @/ 开头的导入路径都将被映射到 src/ 目录下的相应位置。这使得你可以使用更简洁的路径来导入模块,例如 import Button from '@/components/Button'; 实际上导入的是 src/components/Button

  • jsx : "preserve" 指定 JSX 代码的处理方式为"保留"。这意味着 JSX 代码不会被转换成 React.createElement 调用,而是保持原样。这通常用于你希望由其他工具(如 Next.js)进一步处理 JSX 时。

  • lib : 这个数组列出了项目中使用的库文件,这些库包含了一系列预定义的类型声明。你的配置中包括了 "esnext", "dom", "dom.iterable", 和 "scripthost",它们分别代表最新的 ECMAScript 功能、DOM API、可迭代 DOM 集合以及脚本主机环境的类型支持。这有助于编辑器提供更准确的类型检查和智能提示。

相关推荐
Li_Ning2111 分钟前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一1 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla1 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡1 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu1 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c1 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪1 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆2 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻2 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
哟哟耶耶3 小时前
React-01React创建第一个项目(npm install -g create-react-app)
前端·javascript·react.js