React Native 配置alias

2024-03-30 08:13| 来源: 网络整理| 查看: 265

配置目录别名，从而方便书写代码引用路径。

安装 babel-plugin-module-resolver

yarn add --dev babel-plugin-module-resolver

配置 .babelrc

{ "presets": ["module:metro-react-native-babel-preset"], "plugins": [ ["module-resolver", { "root": ["./src"], "alias": { "@/utils": "./src/utils", "@/styles": "./src/styles", "@/actions": "./src/actions", "@/components": "./src/components", "@/services": "./src/services" } }] ] }

配置 jsconfig.json 或者 tsconfig.json

为了让编辑器（VS Code）认得我们的别名，并继续使用自动路径补全的功能以及CMD+Click or CTRL+Click直接进入文件，需要在项目根目录下的 jsconfig.json 或者 tsconfig.json 中配置 paths ，形式如下

{ "compilerOptions": { "baseUrl": ".", "paths": { "@/utils/*": ["./src/utils/*"], "@/styles/*": ["./src/styles/*"], "@/actions/*": ["./src/actions/*"], "@/components/*": ["./src/components/*"], "@/services/*": ["./src/services/*"], } } }

建议别名使用 @/ 开头而非仅用 @ 开头，因为有小概率会与某些 scoped 形式的 npm 包（形如： @babel/core）产生命名冲突。

You may need to restart the VS Code

【本文地址】

公司简介

联系我们