make alias work with customize-cra in ionic项目
最后有附完整配置代码，我的项目 ionic-cli + customize-cra + react，项目是能正常运行和打包的。
但当运行命令 ionic cap sync 时，项目中用了@/pages/....的，会报错 module not found...
这是因为ionic命令走的是react-script，不是react-app-rewired，所以custmize-cra配置的alias对react-script不生效
只需要改node_modules里面的react-script 配置，alias，然后再同步包即可，如
'@': paths.appSrc,
'@imgs': paths.appSrc + 'assets/images'
tsconfig.json
{
"extends": "./paths.json",
"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"
},
"include": [
"src"
],
"exclude": ["node_modules"]
}
paths.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@imgs/*": ["src/assets/images/*"]
}
}
}
config-overrides.js
const {
override,
fixBabelImports,
addWebpackAlias,
addLessLoader,
adjustStyleLoaders,
} = require('customize-cra');
const path = require('path');
const paths = require('react-scripts/config/paths');
paths.appBuild = path.join(path.dirname(paths.appBuild), 'build');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
addWebpackAlias({
'@': path.resolve(__dirname, 'src'),
'@imgs': path.resolve(__dirname, 'src/assets/images'),
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
localIdentName: '[local]--[hash:base64:5]',
sourceMap: true
},
}),
adjustStyleLoaders(({ use: [, , postcss] }) => {
const postcssOptions = postcss.options;
postcss.options = { postcssOptions };
}),
);package.json
{
"name": "shlzz-app",
"version": "0.0.1",
"private": true,
"dependencies": {
"@awesome-cordova-plugins/core": "^6.2.0",
"@awesome-cordova-plugins/diagnostic": "^6.2.0",
"@awesome-cordova-plugins/media-capture": "^6.2.0",
"@awesome-cordova-plugins/sqlite": "^6.2.0",
"@capacitor/android": "^4.6.1",
"@capacitor/app": "^4.1.1",
"@capacitor/app-launcher": "^4.1.0",
"@capacitor/camera": "^4.1.4",
"@capacitor/core": "^4.6.1",
"@capacitor/filesystem": "^4.1.4",
"@capacitor/haptics": "^4.1.0",
"@capacitor/ios": "^4.6.1",
"@capacitor/keyboard": "^4.1.0",
"@capacitor/network": "^4.1.0",
"@capacitor/preferences": "^4.0.2",
"@capacitor/splash-screen": "^4.1.2",
"@capacitor/status-bar": "^4.1.1",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@formily/antd": "^2.0.2",
"@formily/core": "^2.0.2",
"@formily/react": "^2.0.2",
"@ionic-native/core": "^5.36.0",
"@ionic-native/native-storage": "^5.36.0",
"@ionic-native/photo-viewer": "^5.36.0",
"@ionic/pwa-elements": "^3.1.1",
"@ionic/react": "^6.4.1",
"@ionic/react-router": "^6.4.1",
"@mui/icons-material": "^5.6.2",
"@mui/lab": "^5.0.0-alpha.79",
"@mui/material": "^5.6.3",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.6.3",
"@turf/boolean-equal": "^6.5.0",
"@turf/boolean-within": "^6.5.0",
"@turf/clean-coords": "^6.5.0",
"@turf/difference": "^6.5.0",
"@turf/invariant": "^6.5.0",
"@turf/line-intersect": "^6.5.0",
"@turf/line-offset": "^6.5.0",
"@turf/line-to-polygon": "^6.5.0",
"@turf/truncate": "^6.5.0",
"@turf/union": "^6.5.0",
"@types/jest": "^26.0.20",
"@types/node": "^12.19.15",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"antd": "^4.17.2",
"axios": "^0.24.0",
"babel-plugin-import": "^1.13.5",
"bson": "^4.7.0",
"cordova-plugin-device": "^2.1.0",
"cordova-plugin-file": "^7.0.0",
"cordova-plugin-media-capture": "^4.0.0",
"cordova-sqlite-storage": "^6.1.0",
"cordova.plugins.diagnostic": "^7.1.1",
"core-js": "^3.22.5",
"cross-env": "^7.0.3",
"customize-cra": "^1.0.0",
"echarts": "^5.4.0",
"ionicons": "^5.4.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"moment": "^2.29.1",
"oidc-client": "^1.11.5",
"ol": "^6.14.1",
"postcss-pxtorem": "^6.0.0",
"proj4": "^2.7.5",
"promise.prototype.finally": "^3.1.3",
"react": "^17.0.1",
"react-app-polyfill": "^3.0.0",
"react-app-rewired": "^2.2.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.0",
"rxjs": "^6.5.0",
"swiper": "^8.1.5",
"trtc-js-sdk": "^4.14.6",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4",
"workbox-core": "^5.1.4",
"workbox-expiration": "^5.1.4",
"workbox-google-analytics": "^5.1.4",
"workbox-navigation-preload": "^5.1.4",
"workbox-precaching": "^5.1.4",
"workbox-range-requests": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4",
"workbox-streams": "^5.1.4"
},
"scripts": {
"mock": "cross-env REACT_APP_ENV=mock react-app-rewired start",
"dev": "cross-env REACT_APP_ENV=dev react-app-rewired start",
"build": "react-app-rewired build",
"staging": "cross-env REACT_APP_ENV=staging react-app-rewired start",
"publish": "cross-env REACT_APP_ENV=production react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie > 9"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie > 9"
]
},
"devDependencies": {
"@capacitor/cli": "^4.6.1",
"@types/fastclick": "^1.0.30",
"@types/openlayers": "^4.6.18",
"@types/proj4": "^2.5.2",
"axios-mock-adapter": "^1.20.0",
"babel-polyfill": "^6.26.0"
},
"description": "An Ionic project"
}