配置别名

在项目中导包需要../../../这样写，很不方便。 通过配置别名可以优化导包

添加依赖
yarn add babel-plugin-module-resolver

配置内容

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['import', {libraryName: '@ant-design/react-native'}], // 与 Web 平台的区别是不需要设置 style
    [
      'module-resolver',
      {
        alias: {
          '@': './',
          '@nav': './js/navigation',
          '@page': './js/page',
          '@asset': './asset',
        },
      },
    ],
  ],
};

然后我还用antd-rn 。需要配置动态引入。 需要再加载一个包
yarn add babel-plugin-import

这样别名就配置好了。 但是我使用的webStorm。 要想样webStorm识别别名。需要再配置一个文件。

配置内容

这个是看别人的文章做的。 然后文章地址给忘了，就不放原链接了。

最后把这个配置的内容和我的依赖信息放一下。

/**
 * 由于 Vue CLI 3 不再使用传统的 webpack 配置文件，故 WebStorm 无法识别别名
 * 本文件对项目无任何作用，仅作为 WebStorm 识别别名用
 * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack，选择这个文件即可
 * */
const resolve = dir => require('path').join(__dirname, dir);

module.exports = {
  resolve: {
    alias: {
      '@': resolve('./'),
      '@nav': resolve('./js/navigation'),
      '@page': resolve('./js/page'),
      '@asset': resolve('./asset'),
    },
  },
};

image.png