react native 配置路径别名alias

什么是路径别名

不使用路径别名：

import { CheckIcon } from '../../../src/components/icons'

使用路径别名：

import { CheckIcon } from '@icons'

节省了好多代码，简洁明了，是不是很神奇？

如何使用路径别名

使用[babel-plugin-module-resolver]
在 babel.config.js中，配置别名

1.安装依赖

yarn add babel-plugin-module-resolver --save

2.配置 babel.config.js

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

3.根目录新建 tsconfig.json (可选项)

这一步 ts 项目才需要，js 项目直接看下一步

{
  "compilerOptions": {
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

4.使用别名

新建 src 文件夹，使用 @ 别名引入 src 文件夹下的文件

root配置

我们还能用root字段来自定义我们项目的 root 目录：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        alias: {
          '@icons': './src/components/icons',
          '@components': './src/components/components',
        },
        root: ['./src'],
      },
    ],
  ],
};

root 字段接收一个数组，可以指定多个自定义的项目 root目录, 然后

   import { projectA } from 'project';

metro 会从根目录去寻找project目录，由于根目录被指定为 babel.config.js 所在路径的 ./src，故project就等同于项目本来的根目录下的src下的project