如何在包 json 或其他方式中使用 env 变量

Question

I have just created my first React app but at the end I noticed that I am repeating myself in one place. I needed to add the homepage field to package.json since I am hosting my app under a sub-directory. But then I also needed to add the same homepage as the basename for my router. Well, that means I could update one and forget to update the other, it's not DRY.

Is there a way to have my homepage path only in one place? Maybe use the .env variable in package.json?

my package.json (notice homepage)

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "/react-app/build",  
  "dependencies": {
    ...
  },

and also in my .env file

REACT_APP_HOMEPAGE=/react-app/build

Then in my router I needed to add this

<Router basename={process.env.REACT_APP_HOMEPAGE}>

Having my homepage path in 2 places is not a good idea. Is there a way I can use my ENV variable in the package.json file or maybe use the package.json variable in my app?

Answer 1

As I already mentioned in the comment section. Its not an ideal way of doing things but the below solution should work. You should instead define the homepage in your package.json as you did then in the component that uses the router, you can import the package.json and read the homepage property from it. as in

    let packageJson = require('../path/to/package.json');
    packageJson.homepage

If you later inside the package.json needs to use that value, you can then do something like

$npm_package_homepage.

you can find more details about using variables in package.json here Referencing variables in package.json This way when there is a need for editing you can do it in one place inside the package.json and all the other places will take effect.