配置自定义路径别名
1、编辑您tsconfig.json的自定义路径映射。将 的根目录中的任何内容设置src为可用,无需前面的路径引用,并允许使用test/File.tsx以下命令访问任何测试文件:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext",
"baseUrl": ".",
"paths": {
"@src/*": ["src/*"],
"@pages/": ["src/pages/"],
}
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
2、通过添加新的依赖项来配置 Babel 端babel-plugin-module-resolver:
yarn add --dev babel-plugin-module-resolver
# or
npm install --save-dev babel-plugin-module-resolver
3、最后,配置您的babel.config.js(注意您的语法与您babel.config.js的不同tsconfig.json):
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
alias: {
'@src': './src/',
'@pages': './src/pages/',
},
},
],
],
};
注意
在配置过程中如果出现了错误,如何排查呢?鼠标指向你引入的路径,将映射的完整路径复制下来。对比颜色。