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');
查看3道真题和解析
