我发现下面的代码片段最适合我。因为它使用require来加载package.json，所以无论当前的工作目录如何，它都能正常工作。

var pjson = require('./package.json');
console.log(pjson.version);

@病原体：

使用Browserify执行此操作会带来安全问题。注意不要将package.json暴露给客户端，因为这意味着所有的依赖版本号、构建和测试命令等都会发送给客户端。如果您在同一个项目中构建服务器和客户端，那么也会暴露服务器端版本号。攻击者可以使用这些特定数据来更好地适应服务器上的攻击。

用于以下web组件的版本：

const { version } = require('../package.json')

class Widget extends HTMLElement {

  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
  }

  public connectedCallback(): void {
    this.renderWidget()
  }

  public renderWidget = (): void => {
    this.shadowRoot?.appendChild(this.setPageTemplate())
    this.setAttribute('version', version)
  }
}

使用ES6模块，您可以执行以下操作：

import {version} from './package.json';

如果您想获取目标包的版本。

import { version } from 'TARGET_PACKAGE/package.json';

例子：

import { version } from 'react/package.json';

我发现下面的代码片段最适合我。因为它使用require来加载package.json，所以无论当前的工作目录如何，它都能正常工作。

var pjson = require('./package.json');
console.log(pjson.version);

@病原体：

使用Browserify执行此操作会带来安全问题。注意不要将package.json暴露给客户端，因为这意味着所有的依赖版本号、构建和测试命令等都会发送给客户端。如果您在同一个项目中构建服务器和客户端，那么也会暴露服务器端版本号。攻击者可以使用这些特定数据来更好地适应服务器上的攻击。

我正在使用create-react应用程序，在执行react应用程序时，我没有process.env.npm_package_version可用。

我不想在我的客户端代码中引用package.json（因为向客户端暴露了危险的信息，比如包版本），也不想安装另一个依赖项（genversion）。

我发现我可以通过在package.json中使用$npm_package_version来引用package.jsn中的版本：

"scripts": {
    "my_build_script": "REACT_APP_VERSION=$npm_package_version react-scripts start"
}

现在，版本始终遵循package.json中的版本。