如何确定React应用开发和生产环境下实际使用的npm包版本

首先明确：只要是同一套node_modules依赖目录，npm run start开发环境和npm run build生产打包使用的依赖版本完全一致，可通过以下方法查询：

方法1：使用npm命令查询本地安装版本 #

直接在项目根目录执行命令，即可查看对应包在node_modules中安装的实际版本：

• 查询单个包版本：npm ls <包名>，例如查询axios就执行npm ls axios
• 查询所有已安装包的版本树：直接执行npm ls

该方法返回的结果就是项目运行、打包时实际调用的依赖版本，优先级高于package.json中标记的语义化版本范围。

方法2：查看锁文件固定版本 #

项目根目录下的package-lock.json（npm使用）或yarn.lock（yarn使用）会固定所有依赖的实际安装版本，直接打开文件搜索对应包名，找到version字段即可确认实际版本。

只要锁文件没有被修改，即使删除node_modules重新执行npm install，安装的依赖版本也会和锁文件中记录的完全一致。

方法3：运行时/打包后在线查询版本 #

如果需要确认已经打包部署的生产环境实际使用的版本，可在项目代码中加入版本打印逻辑：

// 可在App.js等入口文件中加入以下代码，开发、生产环境都会生效
import axios from 'axios'
console.log('当前使用的axios版本：', axios.version)

部署后打开浏览器控制台，即可直接看到对应依赖的实际版本，不需要本地源码也能验证。

内容的提问来源于stack exchange，提问作者anvin