create-react-app项目配置@绝对路径快捷方式_create-react-app中使用@

为什么要配置？

因为可能后面我们的项目很很多很大，项目层级比较复杂，为了防止文件路径引用的错误，我们可以使用@/这种方式来减少犯错误的可能。

首先介绍---CRACO

什么是CRACO？
要在使用 Create React App 时自定义大多数内容，您可以弹出。但是，您需要自己维护每个配置和脚本，这可能有点烦人。CRACO代表Create React App Configuration Override，它允许你获得Create React App的所有好处，而无需弹出。自定义您的配置 ESLint、Babel、PostCSS 等，只需在项目根目录下使用一个配置文件即可。

第一步：

下载这个包CRACO

npm i -D @craco/craco

第二步：

在你项目的根目录下创建 craco.config.js

  my-app
  ├── node_modules
+ ├── craco.config.js
  └── package.json

 

craco.config.js文件内容

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

第三步：

替换你的create-react-app脚手架下的启动和打包命令！

package.json文件里面

"scripts": {
-  "start": "react-scripts start"
+  "start": "craco start"
-  "build": "react-scripts build"
+  "build": "craco build"
-  "test": "react-scripts test"
+  "test": "craco test"
}

到这里你的配置就完成了，下面我们来配置联想提示！！！

还是在你的项目根目录下建立一个jsconfig.json文件

文件里面的内容代码

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

 到这里你的联想提示也配置完成了

最后希望可以帮到大家，谢谢！