- 初始化項(xiàng)目
npm install -g create-react-app
create-react-app my-app --typescript
具體參考： https://www.html.cn/create-react-app/docs/adding-typescript/
- 安裝插件以修改配置
yarn add react-app-rewired customize-cra
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
- 然后在項(xiàng)目根目錄創(chuàng)建一個(gè) config-overrides.js 用于修改默認(rèn)配置, 并加入別名配置
const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const path = require("path");
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
addWebpackAlias({
// add your alias
'@' : path.resolve(__dirname, 'src')
})
)
- 在上一步中我們加入了alias也就是別名, 但是僅僅這樣還是不夠的，如果我們?cè)诖a中使用 別名去引入其他文件還是會(huì)編譯報(bào)錯(cuò)，在ts項(xiàng)目中家淤，還需要修改 tsconfig.json, 在其中加入paths
// 在tsconfig.json中最后一行追加
"extends": "./paths.json"
在tsconfig.json同級(jí)目錄新建paths.json
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["*"]
}
}
}
// 注意這里不能直接在tsconfig.json中添加 paths配置，一定放要在擴(kuò)展配置中
- 最后再搭配上vscode脖岛，就可以開始愉快地coding赞咙，享受ts給你帶來(lái)的超爽體驗(yàn)了~
