如何避免路由文件中的循环导入答案

【问题标题】：How can I avoid circular imports in routes file如何避免路由文件中的循环导入
【发布时间】：2021-12-04 00:07:43
【问题描述】：

我正在尝试将我的路由文件组织成多个文件，但由于尚未声明，因此无法访问主文件中声明的“枚举”对象。

在下面的示例中，我收到错误 ReferenceError: Cannot access 'MenuItem' before initialization。

我觉得奇怪的是函数 (createRoute) 不会导致同样的错误，所以它确实在 routesSettings 文件调用它之前被声明了。

有什么技巧可以让我保持我想要的结构吗？

routes.js

import Home from "../pages/Home";
import Settings from "../pages/settings";

import { routesSettings } from "./routesSettings"

export const MenuItem = Object.freeze({
    HOME: "Home",
    SETTINGS: "Settings",
});

export const routes = [
    // Home
    createRoute(MenuItem.HOME, "/", Home),
    // Settings
    createRoute(MenuItem.SETTINGS, "/", SETTINGS),
    ...routesSettings,
]

export function createRoute(name, route, component) {
    return { name, route, component };
}

routesSettings.js

import PasswordSettings from "../pages/settings/password";
import UserSettings from "../pages/settings/user";

import { createRoute, MenuItem } from "./routes"

export const routesSettings = [
    createRoute(MenuItem.SETTINGS_PASSWORD, "/settings/password", PasswordSettings),
    createRoute(MenuItem.SETTINGS_USER, "/settings/password", UserSettings),
];

【问题讨论】：

把MenuItem放到它自己的文件里，然后在这里导入到你的文件里

标签： javascript reactjs ecmascript-6

【解决方案1】：

您看到此错误的原因： ReferenceError：在初始化之前无法访问“MenuItem”

是因为您在routesSettings.js 文件中导入了MenuItem；通常在编译期间，JS 引擎将在您的词法环境中使用 undefined 提升所有 variable 声明，并且它们都保持为 uninitialized 并且仅在代码的实际评估期间才被初始化。

尝试在您的routesSettings.js 文件中记录MenuItems，您会发现它的值实际上在该文件中是未定义的？

但是，您会注意到createRoute 函数没有抛出任何错误...原因是因为 JS 中的函数声明是在编译期间添加到内存中的，我们可以在实际函数声明之前使用它。通常，JS 引擎会查看它找到函数并执行它的词法环境。

另外，如果您将 createRoute 函数更改为：

export const createRoute = (name, route, component) => {
    return { name, route, component };
};

你会遇到像createRoute is undefined etc.. 这样的错误，因为const 仍然是uninitialized，因此undefined 在你的词法环境中。函数表达式也不会被提升 const neverHoisted = function(){...}。

总之，JS 只提升声明而不是赋值/初始化。

您需要做的是为menuItem 创建一个单独的文件，并将其导入router.js 和routeSettings.js 文件中。

【讨论】：