react-native 配置@/路径

330 阅读1分钟

@/配置

检查依赖

babel-plugin-module-resolver

如果没有就请重新安装

yarn add babel-plugin-module-resolver

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '@': './src',
        },
      },
    ],
  ],
};

配置完成后

清除缓存并重启项目:有时Babel可能会缓存先前文件。

rm -rf node_modules/ 
yarn cache clean 
yarn install 
yarn start -- --reset-cache

让编辑器能自动跳转

在根目录(babel.config.js 同级目录)增加一个 jsconfig.json 文件,对于你起别名的目录,在 paths 里面进行配置即可:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

参看链接:juejin.cn/post/708461…