为什么我不能从另一个文件访问变量？

Question

在我的项目中，我使用 WebPackEncore 来管理我的库。

在一个文件中，我重新组合了访问 API 所需的所有密钥，它被称为 keys.js:

const keys = {
    //> Algolia/places API
    ALGOLIA_PLACE_APP_ID: "appKey",
    ALGOLIA_PLACE_API_ID: "APIkey",
    //###< Algolia/places API

    //> MapBox API
    MAPBOX_TOKEN: "mapBoxToken",
    //< MapBox API
}

在我的 app.js 文件中，我尝试使用这些键：

import keys from './keys';

//do stuff

如果我尝试在我的 app.js 文件中使用 console.log(keys)，我会得到一个 {}，这使它完全没用。

这是正常行为吗？我错过了范围问题？插入密钥的方式不好吗（我尝试重现 .env 文件的行为）？

Answer 1

您没有从 keys.js 导出变量。像这样尝试..

export default keys = {
    //> Algolia/places API
    ALGOLIA_PLACE_APP_ID: "appKey",
    ALGOLIA_PLACE_API_ID: "APIkey",
    //###< Algolia/places API

    //> MapBox API
    MAPBOX_TOKEN: "mapBoxToken",
    //< MapBox API
}

Answer 2

Kelly Copley 的回答是好的，但前提是您要默认导出 keys。如果您希望以模块化方式导出 keys，请像这样尝试：

export const keys = {
    //> Algolia/places API
    ALGOLIA_PLACE_APP_ID: "appKey",
    ALGOLIA_PLACE_API_ID: "APIkey",
    //###< Algolia/places API

    //> MapBox API
    MAPBOX_TOKEN: "mapBoxToken",
    //< MapBox API
}

然后你像这样导入它：

import { keys } from './keys';

为什么我不能从另一个文件访问变量？

Why can't I access variables from another file?

javascript

webpack-encore