【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/components 和 src/utils 目录的导入路径。你可以在项目根目录下创建一个 jsconfig.json 文件，并添加以下内容：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src"]
}

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

import MyComponent from '@components/MyComponent';
import myUtility from '@utils/myUtility';

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

注意事项

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

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

个人推荐配置

{
  "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）。这允许你使用 import 和 export 语句来导入和导出模块，而不是传统的 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 集合以及脚本主机环境的类型支持。这有助于编辑器提供更准确的类型检查和智能提示。