react-native 设置路径别名

react-native 设置路径别名

插件介绍

babel-plugin-module-resolver 允许你在项目中设置“根”目录来查找模块，并且可以自定义别名，无论是目录、特定文件还是其他npm模块。简单来说，这个插件的目标就是将复杂的路径转换成简洁易读的形式，让开发者能更快地找到并引用所需资源。

下载依赖

yarn add --dev babel-plugin-module-resolver

修改 babel.config.js

使用自定义根或别名在babel.config.js中指定插件。

module.exports = {
  plugins: [
    'module-resolver', 
    {
      root: ['.'],
      extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
      alias: {
        "@": "./src",
      }
    }
  ],
};

配置tssconfig.json 来配置TypeScript编译器，以识别自定义路径别名。

{
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
      
    }
  },
  "extends": "@tsconfig/react-native/tsconfig.json"
}