在 react 组件文件中使用 package.json 文件好不好？

Question

I have to use version mentioned in package.json file in front-end(react js) file.

{
  "name": "asdfg",
  "version": "3.5.2", // want to use this
  "description": "description",
  "scripts": {}
  //etc etc etc
  ......
}

Send package.json [version] to Angularjs Front end for display purposes

I'd gone through above post and found two ways for the same. but none of them I was asked to implement.

#1. During build process

#2. By creating endpoint

So I want to know the approach below is valid/good or not ?

react-front-end-file.js

import packageJson from '../package.json'; // imported
...
...
// Usage which gives me version - 3.5.2
<div className='app-version'>{packageJson.version}</div> 

Let me know if this approach is fine.

Answer 1

The below 2 approaches seems to have either dependency or add an extra implentation which might not be needed

1. During build process - ( has dependency on module bundler like webpack etc.)

2. By creating endpoint - ( needs an extra code at server just to get version )

Instead, As package.json is a file which takes json object in it so you can use it to import json and use its any keys mentioned in that file ( version in your case but only constraint here is, you should have access to package.json file after application deployment, so dont forget to move file in deployment environment )

So your approach seems to be fine.

Answer 2

I would do something like this: In your module bundler, require your package json file and define a global variable and use it wherever you want

eg I do something like this in webpack:

const packageJson = require('./package.json')

const plugins = [
  new webpack.DefinePlugin(
    {
      '__APPVERSION__': JSON.stringify(packageJson.version)
    }
 )
]

React Component:

<div className='app-version'>{__APPVERSION__}</div>