React Native 配置alias

配置目录别名，从而方便书写代码引用路径。

安装 babel-plugin-module-resolver

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

配置 .babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "@/utils": "./src/utils",
        "@/styles": "./src/styles",
        "@/actions": "./src/actions",
        "@/components": "./src/components",
        "@/services": "./src/services"
      }
    }]
  ]
}

配置 jsconfig.json 或者 tsconfig.json

为了让编辑器（VS Code）认得我们的别名，并继续使用自动路径补全的功能以及CMD+Click or CTRL+Click直接进入文件 ，需要在项目根目录下的 jsconfig.json 或者 tsconfig.json 中配置 paths ，形式如下

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/utils/*": ["./src/utils/*"],
      "@/styles/*": ["./src/styles/*"],
      "@/actions/*": ["./src/actions/*"],
      "@/components/*": ["./src/components/*"],
      "@/services/*": ["./src/services/*"],
    }
  }
}

建议别名使用 @/ 开头而非仅用 @ 开头，因为有小概率会与某些 scoped 形式的 npm 包（形如： @babel/core）产生命名冲突。

You may need to restart the VS Code