关于前端:React-Native项目设置路径别名

没有设置门路别名之前代码是这样的：

import {px2dp} from '../../utils/screenKits';

门路相当简短，看着就头疼。减少了门路别名之后，变成这样

import {px2dp} from '~/utils/screenKits';

心里清新多了！
具体操作见下文，实操性强！

装置插件

这里我选用 babel-plugin-root-import 插件，次要是不便，不须要再为了 eslint 不辨认 ‘@’ 而减少配置。

这个 babel-plugin-module-resolver 插件，也能够，然而须要解决 eslint 的配置

yarn add babel-plugin-root-import --dev

批改 babel.config.js

module.exports = {presets: ['module:metro-react-native-babel-preset'],
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true}], // mbox
    // ['react-native-reanimated/plugin'],
    [
      'babel-plugin-root-import',
      {
        paths: [
          {
            rootPathSuffix: './src',
            rootPathPrefix: '~/', // 应用 ~/  代替 ./src (~ 指向的就是 src 目录)
          },
          {
            rootPathSuffix: './src/utils',
            rootPathPrefix: '!/',
          },
        ],
      },
    ],
  ],
};

批改 import 门路测试

革除 rn 缓存并重新启动我的项目

yarn clear-run

"scripts": {
  "android": "react-native run-android",
  "ios": "react-native run-ios",
  "start": "react-native start",
  "test": "jest",
  "lint": "npx eslint --ext .js,.jsx,.ts,.tsx ./src",
  "lint:fix": "npx eslint --fix .",
  "check": "lint-staged",
  "format": "prettier --write'src/**/*.js'","prettier":"npx prettier --write .","prepare":"husky install","clear":"yarn cache clean","clear-run":"react-native start --reset-cache","del":"rimraf node_modules yarn.lock"
},

能够看到我的项目能够失常启动、失常运行

👉修复函数跳转到定义性能

配置 vscode：https://code.visualstudio.com/docs/languages/jsconfig
再我的项目根目录减少 jsconfig.json 文件

{
  "compilerOptions": {
    "baseUrl": ".", // 根底目录
    "paths": { //  指定绝对于 baseUrl 选项计算的门路映射, 别名门路也能够跳转
      "~/*": ["src/*"]
    }
  }
}

这个配置是针对编辑器的，不必重启我的项目，配置即失效

我是 甜点 cc☭

公众号：【看见另一种可能】