一.使用ts构建的react项目，现在tsconfig.json文件中配置baseUrl和paths。由于直接在tsconfig.json里面配置paths字段后重启项目，会将配置好的paths自动移除，所以采用extends字段让tsconfig.json继承自定义的tsconfig.paths.json。步骤如下：
1.现在项目根目录下创建tsconfig.paths.json文件,内容如下：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
2.在tsconfig.json中继承tsconfig.paths.json文件，使用了tsconfig.json提供的extends字段:
{
"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",
"experimentalDecorators":true },
"include": [
"src" ],
"extends": "./tsconfig.paths.json"}
3.配置完tsconfig.json文件后，就需要安装customize-cra和react-app-rewired库：
yarn add customize-cra react-app-rewired --save-dev
4.修改package.json:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject" }
5.在项目根目录下新建config-overrides.js（只能是js文件，别建成ts文件了），内容如下：
const { override, addDecoratorsLegacy, addWebpackAlias } = require("customize-cra");
const path = require("path");
module.exports = override(
addDecoratorsLegacy(),
addWebpackAlias({
"@": path.resolve(__dirname, './src')
})
);
6.配置完成，可以在项目中使用如：import App from "@/App"的导入方式了
网友评论