如何实现从'modules'直接导入useAuth？附项目结构与代码示例

你的项目结构 #

-src
--modules
---Auth
----AuthContext.js/ts

AuthContext文件代码 #

const AuthContext = createContext();
// ...AuthContext相关逻辑代码

const useAuth = () => {
  // ...自定义Hook的实现逻辑
};

export { useAuth };

需求 #

希望实现以下方式导入useAuth：

import { useAuth } from 'modules';

实现步骤 #

1. 在modules目录下创建入口文件 #

在src/modules文件夹里新建index.js（或index.ts，根据项目技术栈选择），在文件中导出useAuth：

// src/modules/index.js
export { useAuth } from './Auth/AuthContext';

2. 配置模块路径别名 #

需要让项目识别'modules'这个别名指向src/modules目录，不同构建工具的配置方式如下：

• Create React App（CRA）：
  在项目根目录创建jsconfig.json（JS项目）或tsconfig.json（TS项目），添加以下配置：

  {
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "modules": ["./modules"]
      }
    }
  }
  

• Vite：
  修改vite.config.js（或.ts）：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        'modules': '/src/modules'
      }
    }
  });
  

• Webpack：
  修改webpack.config.js：

  const path = require('path');
  
  module.exports = {
    // ...其他Webpack配置
    resolve: {
      alias: {
        'modules': path.resolve(__dirname, 'src/modules')
      }
    }
  };
  

完成以上两步后，你就可以通过import { useAuth } from 'modules';的方式导入目标Hook了。

内容的提问来源于stack exchange，提问作者Peril