码了几个礼拜的rn代码后,回看之前的代码,在import 模块或组件的时候,输入N个“../”感觉写着很烦,可读性也很差!
rn01.png
so,想起的写vue的alias,了解一番react-native的插件后,有一个比较好用的插件babel-plugin-module-resolver
这是一个Babel模块解析插件,这个插件你可以添加新的根目录,也可以设置一个自定义的别名目录.安装:
npm install --save-dev babel-plugin-module-resolver
或
yarn add babel-plugin-module-resolver
安装插件后,需要新建一个.babelrc配置文件,这里我们主要用到了它的对插件(plugins) 进行配置的特性. 简单配置如下:
{
"presets": ["react-native"],
"plugins": [
["module-resolver",
{
"root": ["./"],
"alias": {
"app":"./app",
"image": "./image"
}
}
]
]
}
so,接下来可以修改import的模块引用了
rn02.png
这样是不是写的时候方便多了,结构看的也清晰多了.
改完这个之后,以为告一段路了,但是还是有一个遗憾... 使用alias之后,cmd+点击模块名 页面跳转失效了,vscode识别目录失败. 别急~
方案可能有多种如安装插件Path Intellisense,这边说一种简单的,新建一个jsconfig.json文件,配置信息如下
{
"compilerOptions": {
"target": "ES6",
"jsx": "react-native",
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"app/*": ["app/*"],
"image/*": ["image/*"],
}
},
"exclude": ["node_modules"]
}
重启vs code,发现可以正常点击跳转了...
