问题出发点
![]()
`{HMTJH8OIDQZUHB2$ZXLVV.png
`{HMTJH8OIDQZUHB2$ZXLVV.png
在使用 react-native 得时候，经常需要定义很多组件，但引用得时候 只能 ./ ../ ../../ 这种引用方式，很麻烦，语义也不够直观，到这里就开始 思考有没有 一种 方案类似vue 中 webpack中配置好 @ 直接代表 src目录
alias: {
"@": path.join(__dirname, "src")
}
于是 经过搜索 找到以下解决方案
就是安装 babel-plugin-root-import
npm install babel-plugin-root-import --save-dev
// 或者
yarn add babel-plugin-root-import --dev（感觉这个 貌似快点）
在项目根目录下 添加 .babelrc 文件（如果已经有了 则加入 plugins）
{
"plugins": [
["babel-plugin-root-import", {
"rootPathPrefix": "@",
"rootPathSuffix": "./src"
}]
]
}
也可以指定多个
{
"plugins": [
["babel-plugin-root-import", [{
"rootPathPrefix": "~", // `~` 默认
"rootPathSuffix": "./components"
}, {
"rootPathPrefix": "@",
"rootPathSuffix": "./src"
}]]
]
}
然后 项目中就 可以使用了
import Index from '@/components/tabBars/Index.js';
import Home from '@/views/Home/index.js';
import Video from '@/views/Video/index.js';
import Me from '@/views/Me/index.js';
王浩的博客
