react-native 相对项目路径导入组件

  在使用react-native的时候,经常要自定义很多组件,但是只能使用../../../的方式,经常不记得这是多深,有没有一个插件,能自动帮我们解决这样的问题?节省我们的时候,也将项目看起来更漂亮一点,答案肯定有的,不然不会有这文章了,好了回归正题。

使用指南

我们使用的目标要达到以下的使用效果

// 通常 
import SomeExample from '../../../some/example.js';
const OtherExample = require('../../../other/example.js');

// 使用了 Babel-Root-Importer 之后
import SomeExample from '~/some/example.js';
const OtherExample = require('~/other/example.js');

组件安装

npm install babel-plugin-root-import --save-dev
或
yarn add babel-plugin-root-import --dev

配置

  增加一个.babelrc在项目根目录,并写入(如果已有,则加入plugins):

{
  "plugins": [
    ["babel-plugin-root-import"]
  ]
}

温馨提示

  已有项目,记得清理一个缓存(先关闭所有控制侦听程序)。笔者事实证明,就算不清理也能正常使用。

watchman watch-del-all
npm start -- --reset-cache

扩展

  自定义根路径前缀 
  如果你想把src/js作为项目根入口,你可以修改.babelrc为以下内容:

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "src/js"
    }]
  ]
}

  如何你想修改项目的默认根入口别名,默认~

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathPrefix": "@"
    }]
  ]
}

  也可以定义多组别名入口

{
  "plugins": [
    ["babel-plugin-root-import", [{
      "rootPathPrefix": "~", // `~` 默认
      "rootPathSuffix": "src/js"
    }, {
      "rootPathPrefix": "@",
      "rootPathSuffix": "other-src/js"
    }, {
      "rootPathPrefix": "#",
      "rootPathSuffix": "../../src/in/parent" //也支持父级路径
    }]]
  ]
}

// 然后你就可以这样使用插件了。
import foo from '~/my-file';
const bar = require('@/my-file');
原文地址:https://www.cnblogs.com/xjf125/p/10457550.html