1. 終端命令
npm i @craco/craco
2. 新增 ./craco.config.js 文件
const path = require('path')
module.exports = {
// webpack 配置
webpack: {
// 配置別名
alias: {
// 約定：使用 @ 表示 src 文件所在路徑
'@': path.resolve(__dirname, 'src'),
// 約定：使用 @scss 表示全局 SASS 樣式所在路徑
// 在 SASS 中使用
'@scss': path.resolve(__dirname, 'src/assets/styles')
}
}
}
3. 修改./package.json的script配置
...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
...
4. npm start 跑react項(xiàng)目
Compiled successfully!
You can now view geek-demo in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.101:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
No issues found.
5. 新增./path.tsconfig.json 使用extends 用來(lái)配置tsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"@scss/*": ["src/assets/styles/*"]
}
}
}
6. 修改./tsconfig.json, 新增一條配置, "extends": "./path.tsconfig.json"
{
"extends": "./path.tsconfig.json",
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
...
}
7. 重啟vscode, npm start跑項(xiàng)目, 此時(shí)你可以看到@已經(jīng)可以當(dāng)src絕對(duì)路徑使用了 (注意的是, Home如果是.tsx, 不要寫(xiě)后綴)
import Home from '@/pages/Home/Home'
const App = () => {
console.log(Home)
return (
<div className="app">
<h2>App組件</h2>
<Home></Home>
</div>
)
}
export default App
import { http } from '@/utils/http'
function Home() {
console.log(http)
return (
<div>
<h2>Home組件</h2>
</div>
)
}
export default Home
