我使用了这个模板项目 https://github.com/kristijorgji/cra-ts-storybook-styled-components并升级了一些库。
package.json
看起来像
{
"name": "test",
"version": "0.1.0",
"private": true,
"homepage": "/",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "storybook dev -p 6006 -s public",
"build-storybook": "storybook build -s public",
"lint:eslint": "eslint --ext js,jsx,ts,tsx src",
"lint:prettier": "prettier --check \"src/**/*.*\"",
"lint": "yarn lint:eslint && yarn lint:prettier",
"fix:eslint": "eslint --fix --ext js,jsx,ts,tsx src",
"fix:prettier": "prettier --write './src/**/*.{ts,tsx,json,js}'",
"fix": "yarn fix:eslint && yarn fix:prettier"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.11.0",
"@mui/lab": "^5.0.0-alpha.113",
"@mui/material": "^5.11.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.15.0",
"react-scripts": "^5.0.1",
"styled-components": "^5.2.1",
"typescript": "^5.0.2",
"web-vitals": "^3.4.0"
},
"devDependencies": {
"@storybook/addon-actions": "^7.4.0",
"@storybook/addon-essentials": "^7.4.0",
"@storybook/addon-links": "^7.4.0",
"@storybook/node-logger": "^7.4.0",
"@storybook/preset-create-react-app": "^7.4.0",
"@storybook/react": "^7.4.0",
"@storybook/react-webpack5": "^7.4.0",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^15.0.5",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.12",
"@types/node": "^20.12.7",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
"@types/styled-components": "^5.1.4",
"eslint": "^8.48.0",
"eslint-config-prettier": "^9.0.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-storybook": "^0.6.13",
"prettier": "^3.0.3",
"storybook": "^7.4.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我想使用打字稿路径别名并执行以下步骤:
tsconfig.json
更改为有 "baseUrl": ".",
"paths": {
"@/c/*": ["src/c/*"]
}
完整
tsconfig.json
:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"noImplicitAny": false,
"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": {
"@/c/*": ["src/c/*"]
}
},
"include": [
"src"
]
}
.eslint.js
为解析器添加了 settings
module.exports = {
extends: [
'react-app',
'react-app/jest',
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'plugin:prettier/recommended',
'plugin:storybook/recommended',
],
rules: {
// Include .prettierrc.js rules
'prettier/prettier': ['error', {}, { usePrettierrc: true }],
'react/display-name': 'warn',
'import/no-anonymous-default-export': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
},
settings: {
'import/resolver': {
typescript: {},
},
},
};
这不起作用 我确实收到错误
Module not found: Error: Can't resolve '@/c/services/api' in somepath
知道如何实现这一目标吗?
PS:这个配置在 NextJS 中效果很好。我在那里使用打字稿路径别名,我可以构建并且 eslint 也可以识别它们
我尝试了react-rewire-app但没有成功。
我最后用
craco
解决了这个问题
除了我的问题中提到的步骤之外,我还执行了以下操作:
1
yarn add -D @craco/craco
2 添加
craco.config.js
const path = require('path');
module.exports = {
webpack: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
};
tsconfig.paths.js
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/c/*": ["src/c/*"]
}
}
}
tsconfig.json
以扩展上面的路径{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"noImplicitAny": false,
"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"
},
"include": [
"src"
],
"extends": "./tsconfig.paths.json"
}
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject",