前言

在日常工作中，无论是使用Vue或者React开发，我们都会用到目录别名这个需求，它能让我们迅速定位需要使用的文件位置，而无需通过繁琐的层级标识符，例如向上查找”../../xx”或者向下查找”./xx/xx”等，所以这次主要记录下在React Native项目中如何设置目录别名提升开发效率。

e.g.:

import NavigationUtil from '../../navigator/NavigationUtil';  => import NavigationUtil from '@navigator/NavigationUtil';

一、安装 babel-plugin-root-import

Install

npm install babel-plugin-root-import --save-dev

yarn add babel-plugin-root-import --dev

二、进行babel config配置

有两种方式进行针对该插件的配置

1、在.babelrc文件进行配置

如无此文件可自行进行创建,并进行如下配置

{
  "plugins": [
    ["babel-plugin-root-import",{
        "paths": [
          {rootPathPrefix: '@/', rootPathSuffix: './js'},
          {rootPathPrefix: '@hooks', rootPathSuffix: './js/hooks'},
        ],
      }]
  ]
}

2、在babel.config.js进行配置

对于较新的React Native版本，可以直接在现有的babel.config.js文件中进行配置

module.exports = {
  ...,
  plugins: [
    [
      'babel-plugin-root-import',
      {
        paths: [
          {rootPathPrefix: '@/', rootPathSuffix: './js'},
          {rootPathPrefix: '@hooks', rootPathSuffix: './js/hooks'}
        ],
      },
    ],
  ],
};

三、刷新缓存生效

进行配置后，要记得清除下缓存，否则模拟器会不生效并报错：

yarn start --reset-cache

npx react-native run-ios  //重新启动

至此你的目录别名已经能正常运作，再也不用进行繁琐的目录索引。

总结

虽然目录别名实现的效果很简单，但是在日常开发中，如果能大量使用提升效率的手段，能令我们事半功倍，毕竟时间还是很宝贵的呀！

React Native

React Native 设置文件路径别名

前言