2020-09-23 React Native 路径别名

什么是路径别名

不使用路径别名：

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

使用路径别名：

import { CheckIcon } from '@icons'

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

如何使用路径别名

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

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

这样就可以使用 @icons、@components 这样的别名了；

如果配置了 eslint-plugin-import 的eslint插件的规则，这个插件因为不识别@icons这样的路径别名而会报错，这时候你可以装一个 eslint-import-resolver-babel-module 来避免别名路径被 eslint-plugin-import 报错;

---

我们还能用 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

    it('should resolve the file path', () => {
        const opts = {
          root: ['./test/testproject/src'],
        };
        const result = resolvePath('app', './test/testproject/src/app', opts);

        expect(result).toBe('./app');
      });