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项目
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 用来配置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跑项目, 此时你可以看到@已经可以当src绝对路径使用了 (注意的是, Home如果是.tsx, 不要写后缀)
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
