react natie配置自定义路径别名

配置自定义路径别名

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/',
        },
      },
    ],
  ],
};

注意

在配置过程中如果出现了错误，如何排查呢？鼠标指向你引入的路径，将映射的完整路径复制下来。对比颜色。

参考

RN 官网