如何在react内使用@符号作为src文件

前言

• 我们再写react代码引用组件或者scss的时候，可能会不停的翻阅层级来寻找定义的文件位置
• 我们是用craco解决这个问题。
• 想要在react中使用@符号,我们需要分两步进行:
  • 第一步就是让VsCode识别@符号
  • 第二步是让webpag识别

第一步 VsCode识别@符号

• 在你的项目根目录中创建一个jsconfig.json文件

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

目的就是将@/路径指向src/
注意：此时代码会报错,提示@符号无法识别,当然,这不是vscode本身报错,而是webpag无法识别,我们接下来就想办法让webpag识别

第二步 让webpag识别

2.1引入craco

yarn add @craco/craco

2.2 配置craco.config.js文件

• 在项目根目录下创建一个craco.config.js文件

const path = require('path')
module.exports = {
  webpack: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  }
}

2.3 修改package.json文件,将craco作为执行文件

/* package.json */
"scripts": {
 -  "start": "react-scripts start",
 -  "build": "react-scripts build",
 -  "test": "react-scripts test",
 -  "eject": "react-scripts eject"
 + "start": "craco start",
 + "build": "craco build",
 + "test": "craco test",
 + "eject": "react-scripts eject"
}

• 最后再把代码跑起来,这样就可以在react内使用@标识符了
• 希望对你有所帮助 码云地址：react-question-v6

参考文档：

如何在react内使用@符号
React 添加引用路径时,使用@符号作为src文件