前言： 基于ts語言創建react項目，node版本是v16.14.2
一、 腳手架創建項目
- 全局安裝
npm install -g creacte-react-app
- 創建項目file-management，ts需要添加–template typescript
npx create-react-app file-management --template typescript
二、 添加craco.config.js配置文件，類似于vue的vue.config.js文件
- 安裝
npm i -D @craco/craco
- 在項目根目錄添加craco.config.js文件并添加路徑別名
const path = require('path')module.exports = {// webpack 配置webpack: {// 配置別名alias: {'@': path.resolve(__dirname, 'src')}}
}
- 修改 package.json 中的腳本命令
修改前：
"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},
修改后：
"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "craco eject"},
- 配置路徑識別，在根目錄tsconfig.json文件中添加baseUrl和paths
{"compilerOptions": {"target": "es5","lib": ["dom","dom.iterable","esnext"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx","baseUrl": "./","paths": {"@/*": ["src/*"]}},"include": ["src"]
}更多配置參見craco配置文檔
