技術(shù)棧：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';
路徑是不是看起來(lái)很不爽，如果嵌套的非常深，比如 '../../../../../' 大概率會(huì)崩潰
修改后
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';
- 安裝依賴
首先，確保已安裝 babel-plugin-module-resolver：
yarn add babel-plugin-module-resolver -D
# 或
npm install babel-plugin-module-resolver --save-dev
- 配置 babel.config.js
在你的項(xiàng)目根目錄下的 babel.config.js 文件中進(jìn)行如下配置：
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./'], // 解析的根路徑，通常為當(dāng)前項(xiàng)目根目錄:cite[1]
alias: {
// 定義你的別名映射
'@': './src', // 將 '@' 指向 './src' 目錄
'@assets': './assets',
// ... 你可以繼續(xù)添加其他需要的別名
},
},
],
],
};
- 配置 jsconfig.json 或 tsconfig.json
為了讓你的代碼編輯器（如 VSCode）能夠識(shí)別這些別名并提供智能提示、自動(dòng)補(bǔ)全和跳轉(zhuǎn)功能，你需要在項(xiàng)目根目錄創(chuàng)建或修改 jsconfig.json（JavaScript 項(xiàng)目）或 tsconfig.json（TypeScript 項(xiàng)目）。
// jsconfig.json（JavaScript 項(xiàng)目）
{
"compilerOptions": {
"baseUrl": ".", // 以項(xiàng)目根目錄為基準(zhǔn)解析非絕對(duì)路徑模塊
"paths": {
"@/*": ["src/*"],
"@assets/*": ["assets/*"],
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*"], // 指定包含的文件
"exclude": ["node_modules"]
}
TypeScript 項(xiàng)目 (tsconfig.json)
{
"compilerOptions": {
"baseUrl": ".", // 解析非絕對(duì)模塊名的基目錄
"paths": {
"@/*": ["src/*"],
"@assets/*": ["assets/*"],
},
// ... 其他 TypeScript 配置
}
}
- 清理緩存并重啟開(kāi)發(fā)服務(wù)器
配置完成后，務(wù)必清理 Metro 打包器的緩存并重啟項(xiàng)目，因?yàn)?Metro 可能會(huì)緩存舊的模塊解析規(guī)則
yarn start -- --reset-cache
# 或
npx react-native start --reset-cache
