在项目中导包需要../../../这样写，很不方便。 通过配置别名可以优化导包
添加依赖
yarn add babel-plugin-module-resolver
配置内容
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
['import', {libraryName: '@ant-design/react-native'}], // 与 Web 平台的区别是不需要设置 style
[
'module-resolver',
{
alias: {
'@': './',
'@nav': './js/navigation',
'@page': './js/page',
'@asset': './asset',
},
},
],
],
};
然后我还用antd-rn 。需要配置动态引入。 需要再加载一个包
yarn add babel-plugin-import
这样别名就配置好了。 但是我使用的webStorm。 要想样webStorm识别别名。需要再配置一个文件。
配置内容
这个是看别人的文章做的。 然后文章地址给忘了，就不放原链接了。
最后把这个配置的内容和我的依赖信息放一下。
/**
* 由于 Vue CLI 3 不再使用传统的 webpack 配置文件，故 WebStorm 无法识别别名
* 本文件对项目无任何作用，仅作为 WebStorm 识别别名用
* 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack，选择这个文件即可
* */
const resolve = dir => require('path').join(__dirname, dir);
module.exports = {
resolve: {
alias: {
'@': resolve('./'),
'@nav': resolve('./js/navigation'),
'@page': resolve('./js/page'),
'@asset': resolve('./asset'),
},
},
};
image.png
