在 React 中縮短導入

Question

我決定縮短我在 React 應用程序中的導入。 所以我配置了jsconfig.json 。

我的問題是它在導入時出錯。

Failed to compile. ./src/actions/appActions.js
Module not found: Can't resolve '@constants' 

請參閱下面的代碼。

回購協議

https://drive.google.com/drive/folders/1rp5AagwvMyBRbhb4svHUqyCYH3ROA-L3?usp=sharing

jsconfig.json

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

appActions.js

import { appConstants } from '@constants';

export const setAPIErrorMessage = (error) => {
  return {
    type: appConstants.SET_API_ERROR_MESSAGE,
    payload: error,
  };
};

export const setAPISuccessMessage = (error) => {
  return {
    type: appConstants.SET_API_SUCCESS_MESSAGE,
    payload: error,
  };
};

常量 > index.js

export * from './authConstants';
export * from './appConstants';

常量 > appConstants.js

export const appConstants = {
  SET_API_ERROR_MESSAGE: 'SET_API_ERROR_MESSAGE',
  SET_API_SUCCESS_MESSAGE: 'SET_API_SUCCESS_MESSAGE',
};

Answer 1

你寫"@constants/*": ["src/constants/*"], , but import from import appConstants from '@constants'; . 據我了解，匹配器在@constants之后期望一些東西......

嘗試使用類似的東西

import { appConstants } from '@constants/appConstants';

或者將您的 jsconfig 文件編輯為類似

"@constants": ["src/constants"],

Answer 2

只需像這樣更新導入：

import { appConstants } from '@constants';

並在 config src/constants添加一個路徑：

"@constants": ["src/constants"],
"@constants/*": ["src/constants/*"],