使用别名，优雅的import文件（ React Native 模块化）

技术栈：babel-plugin-module-resolver

import {
  SuruiSerialHexParser,
  unpackCommand,
} from '../../sdk/serialPort/surui/surui_cmd_parser';
import {CommandFrame} from '../../sdk/serialPort/surui/surui_types_const';
import {
  CMD_EVENT_NAMES,
  BRANDS,
} from '../../sdk/serialPort/libs/serial_port_core';

路径是不是看起来很不爽，如果嵌套的非常深，比如 '../../../../../' 大概率会崩溃
修改后

import {
  SuruiSerialHexParser,
  unpackCommand,
} from '@/sdk/serialPort/surui/surui_cmd_parser';
import {CommandFrame} from '@/sdk/serialPort/surui/surui_types_const';
import {
  CMD_EVENT_NAMES,
  BRANDS,
} from '@/sdk/serialPort/libs/serial_port_core';

1. 安装依赖
   首先，确保已安装 babel-plugin-module-resolver：

yarn add babel-plugin-module-resolver -D
# 或
npm install babel-plugin-module-resolver --save-dev

2. 配置 babel.config.js
   在你的项目根目录下的 babel.config.js 文件中进行如下配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'], // 解析的根路径，通常为当前项目根目录:cite[1]
        alias: {
          // 定义你的别名映射
          '@': './src', // 将 '@' 指向 './src' 目录
          '@assets': './assets',
          // ... 你可以继续添加其他需要的别名
        },
      },
    ],
  ],
};

3. 配置 jsconfig.json 或 tsconfig.json
   为了让你的代码编辑器（如 VSCode）能够识别这些别名并提供智能提示、自动补全和跳转功能，你需要在项目根目录创建或修改 jsconfig.json（JavaScript 项目）或 tsconfig.json（TypeScript 项目）。

// jsconfig.json（JavaScript 项目）
{
  "compilerOptions": {
    "baseUrl": ".", // 以项目根目录为基准解析非绝对路径模块
    "paths": {
      "@/*": ["src/*"],
      "@assets/*": ["assets/*"],
    },
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"], // 指定包含的文件
  "exclude": ["node_modules"]
}

TypeScript 项目 (tsconfig.json)

{
  "compilerOptions": {
    "baseUrl": ".", // 解析非绝对模块名的基目录
    "paths": {
      "@/*": ["src/*"],
      "@assets/*": ["assets/*"],
    },
    // ... 其他 TypeScript 配置
  }
}

4. 清理缓存并重启开发服务器
   配置完成后，务必清理 Metro 打包器的缓存并重启项目，因为 Metro 可能会缓存旧的模块解析规则

yarn start -- --reset-cache
# 或
npx react-native start --reset-cache