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

Question

In my project, I use WebPackEncore to manage my libraries.

in a file I regroup all the keys needed to access API, it's called 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
}

in my app.js file I try to use theses keys:

import keys from './keys';

//do stuff 

If I try to use a console.log(keys) in my app.js file I get a {} which make it completely useless.

Is it a normal behavior and I miss a scope problem ? Is it a bad way to insert keys (I try to reproduce the behavior of my .env file) ?

Answer 1

You're not exporting the variable from keys.js . Try like this..

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

The answer of Kelly Copley is alright but that's only if you want to export keys by default. If you wished to export keys in a modular way, try it like this:

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
}

Then you import it like this:

import { keys } from './keys';