安装@babel/cli出现npm漏洞无法修复且Babel无法编译JSX代码求助

npm漏洞提示问题处理 #

• 开发场景下npm audit抛出的大部分依赖漏洞属于开发依赖的低风险问题，不会影响本地开发使用，无需强制修复。
• 不要随意执行npm audit fix --force，该命令会强制升级依赖的大版本，极易引发依赖不兼容问题。
• 如果不想看到审计提示，可以在执行安装命令时追加--audit=false参数，或在项目根目录新建.npmrc文件写入audit=false关闭当前项目的依赖审计。

Babel无法编译JSX（JS文件内的HTML标签）的解决步骤 #

你只安装了Babel的核心和CLI工具，缺少编译React JSX语法必须的预设依赖，按以下步骤补充配置即可：

1. 安装缺失的Babel预设依赖

npm install --save-dev @babel/preset-env @babel/preset-react

2. 在项目根目录新建Babel配置文件babel.config.json，写入以下配置：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }],
    "@babel/preset-react"
  ]
}

3. 执行编译命令测试是否正常工作，比如将src目录下的所有JS文件编译输出到dist目录的命令为：

npx babel src --out-dir dist

4. 如果配置后仍无法正常编译，可以删除node_modules文件夹和package-lock.json文件后重新执行npm install安装所有依赖，解决版本不兼容问题。

如果是纯学习React的场景，更推荐直接使用Vite、Create React App等官方脚手架创建项目，无需手动配置Babel、打包工具等底层依赖，能避开大量配置类问题。

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