【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 集合以及脚本主机环境的类型支持。这有助于编辑器提供更准确的类型检查和智能提示。