react配置-craco路徑使用@符
阿新 • • 發佈:2022-04-02
react配置-craco路徑使用@符
配置@符替代src並提供路徑提示效果
配置路徑別名
目的:配置@路徑別名簡化路徑處理
-
安裝包。
npm i -D @craco/craco
-
在專案根目錄下,建立配置檔案:
craco.config.js
。在配置檔案中就可以做自定義的修改,例如:配置路徑別名
craco.config.js
中const path = require('path') module.exports = { // webpack 配置 webpack: { // 配置別名 alias: { // 約定:使用 @ 表示 src 檔案所在路徑 '@': path.resolve(__dirname, 'src'), // 約定:使用 @scss 表示 樣式 檔案所在路徑 '@scss': path.resolve(__dirname, 'src', 'assets', 'styles') }, }, }
-
修改
package.json
中的指令碼命令package.json
中:// 將 start/build/test 三個命令修改為 craco 方式 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" },
-
重啟專案,讓配置生效
@別名路徑提示
目的:能夠讓vscode識別@路徑並給出路徑提示
因為專案使用了 TS,而 TS 帶有配置檔案 tsconfig.json。VSCode 會自動讀取 tsconfig.json
-
建立
path.tsconfig.json
配置檔案 -
在該配置檔案中新增以下配置
path.tsconfig.json
中
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
-
在
tsconfig.json
中匯入該配置檔案,讓配置生效tsconfig.json 中
{
// 匯入配置檔案
"extends": "./path.tsconfig.json",
}