javascript - Environment variables in Typescript with Webpack - Stack Overflow

admin管理员组

文章数量:1186284

I am having trouble declaring globals in Typescript, using Webpack's DefinePlugin. I was hoping to get some input on what I am doing wrong.

I created an environment variable in my .bash_profile:

export API_KEY_GOOGLE_MAPS=xxxxxxxxxxxxxxxx

In my webpack.config.js, I have the following lines:

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

Inside index.tsx (I am using React), I do the following:

declare var API_KEY_GOOGLE_MAPS: string;

console.log(API_KEY_GOOGLE_MAPS)

This produces the following error, at the line containing console.log:

ReferenceError: API_KEY_GOOGLE_MAPS is not defined

Does anybody have any leads?

I am having trouble declaring globals in Typescript, using Webpack's DefinePlugin. I was hoping to get some input on what I am doing wrong.

I created an environment variable in my .bash_profile:

export API_KEY_GOOGLE_MAPS=xxxxxxxxxxxxxxxx

In my webpack.config.js, I have the following lines:

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

Inside index.tsx (I am using React), I do the following:

declare var API_KEY_GOOGLE_MAPS: string;

console.log(API_KEY_GOOGLE_MAPS)

This produces the following error, at the line containing console.log:

ReferenceError: API_KEY_GOOGLE_MAPS is not defined

Does anybody have any leads?

• javascript
• reactjs
• typescript
• webpack

Share Improve this question Follow asked Dec 14, 2017 at 19:48 bbalanbbalan 69133 gold badges77 silver badges2020 bronze badges 2

• I think you should configure ts-loader with transpileOnly flag, and compile it with babel – ArtemSky Commented Dec 14, 2017 at 19:51
• @ArtemSky This did not have any effect. – bbalan Commented Dec 14, 2017 at 19:54

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 11

The other answers require create-react-app so I will offer mine.

First, add the plugin to your Webpack configuration:

const webpack = require("webpack");

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

Next, declare the variable in TypeScript:

declare var MY_ENV_VAR : string | undefined;

Finally, you can access the variable in your code:

console.log(MY_ENV_VAR);

create-react-app environment variables should be prefixed with REACT_APP_:

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

from the "Adding Custom Environment Variables" documentation.

You should be adding these environment variables to your .env file(s) in place of adding these to your .bash_profile file. The appropriate file will be picked up depending on the build (i.e. start or build), and the application will be easier to share and deploy.

The way I do it is to have a .env file(add it to .gitignore) in the root of my project files.

Within that file I define my project environment variables(additional variables can be separated by adding each to it's own line):

NODE_ENV=development

Then using the dotenv npm module I can access the values in any webpack file(or server side expressJS file for example).

// in the command line
$ npm install --save dotenv

// at the top of the webpack config file
require('dotenv').config();

// in the plugins of the webpack config
plugins: [
    new webpack.DefinePlugin({
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
],

Now I can reference it within my app being transpiled by webpack:

console.log(NODE_ENV); // development

Answering my own question: my project was generated using create-react-app, and according to its documentation, environment variables are accessed this way:

console.log(process.env.API_KEY_GOOGLE_MAPS)

webpack.DefinePlugin() is not required.

本文标签： javascriptEnvironment variables in Typescript with WebpackStack Overflow