javascript - Miljøvariabler i Typescript med Webpack

Jeg har problemer med å deklarere globale variabler i Typescript ved bruk av Webpacks DefinePlugin. Jeg håpet å få noen innspill på hva jeg gjør feil.

Jeg opprettet en miljøvariabel i min .bash_profile:

export API_KEY_GOOGLE_MAPS=xxxxxxxxxxxxxxxx

I min webpack.config.js har jeg følgende linjer:

...
plugins: [
  new webpack.DefinePlugin({
    API_KEY_GOOGLE_MAPS: JSON.stringify(process.env.API_KEY_GOOGLE_MAPS),
  }),
],
...

Inne i index.tsx (jeg bruker React), gjør jeg følgende:

declare var API_KEY_GOOGLE_MAPS: string;

console.log(API_KEY_GOOGLE_MAPS)

Dette gir følgende feil, på linjen som inneholder console.log:

ReferenceError: API_KEY_GOOGLE_MAPS is not defined

Har noen noen spor?

Svar #1

De andre svarene krever create-react-app, så jeg vil tilby mitt.

Først, legg til pluginen i din Webpack-konfigurasjon:

const webpack = require("webpack");

module.exports = {
  // ... 
  plugins: [
    new webpack.DefinePlugin({
      MY_ENV_VAR: JSON.stringify(true),
    }),
  ],
};

Deretter erklærer du variabelen i TypeScript:

declare var MY_ENV_VAR : string | undefined;

Endelig kan du få tilgang til variabelen i koden din:

console.log(MY_ENV_VAR);

Svar #2

Miljøvariabler i create-react-app bør ha prefikset REACT_APP_:

Merk: Du må opprette tilpassede miljøvariabler som begynner med REACT_APP_. Alle andre variabler bortsett fra NODE_ENV vil bli ignorert for å unngå å ved et uhell eksponere en privat nøkkel på maskinen som kan ha samme navn. Å endre noen miljøvariabler vil kreve at du starter utviklingsserveren på nytt hvis den kjører.

fra dokumentasjonen «Legge til egendefinerte miljøvariabler».

Du bør legge til disse miljøvariablene i dine .env-filer i stedet for å legge dem til i din .bash_profile-fil. Den riktige filen vil bli brukt avhengig av bygget (dvs. start eller build), og applikasjonen vil være enklere å dele og distribuere.

Relaterte artikler