添加babel-loader解析JS文件持续报错，求解决方案

问题背景 #

应用中的一个间接依赖包含JS文件，Webpack解析失败，因此添加了babel-loader，相关配置如下：

Webpack配置 #

const webpack = require("webpack");
 
module.exports = {
    entry: './src/index.ts',
    target: 'node',
    mode: 'production',
    module: {
        rules: [
            { 
                test: /\.(ts|tsx)$/, 
                loader: 'ts-loader',
            },
            { 
                test: /\.(js|jsx)$/, 
                loader: 'babel-loader',
            }
        ]
    },
    plugins: [
        new webpack.IgnorePlugin(/vertx/),
    ],
    resolve: {
        extensions: ['.js', '.ts']
    },
    output: {
        filename: 'index.js',
        path: `${__dirname}/dist`,
        library: 'stormcv-website-client',
        libraryTarget: 'umd'
    }
}

.babelrc配置 #

{
    "presets": ["react", "es2015", "stage-0"]
}

package.json配置 #

{
  "name": "stormcv-website-client",
  "version": "1.0.0",
  "description": "client",
  "homepage": "",
  "license": "UNLICENSED",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "browser": {
    "vertx": false
  },
  "repository": {
    "type": "git",
  },
  "dependencies": {
    "coral-super-client": "*"
  },
  "scripts": {
    "build": "webpack",
    "clean": "rm -rf build dist node_modules package-lock.json",
    "prepublishOnly": "npm run build"
  },
  "devDependencies": {
    "@babel/core": "^7.22.1",
    "@babel/preset-env": "^7.22.2",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.22.0",
    "@babel/preset-stage-0": "^7.8.3",
    "@types/node": "^14.14.41",
    "babel-loader": "8.1.0",
    "ts-loader": "8.x",
    "typescript": "^4.2.4",
    "webpack": "5.0.0",
    "webpack-cli": "^3.3.10"
  }
}

构建错误情况 #

构建持续失败，出现两类典型错误：

错误1：依赖包不存在 #

[00:02] info Rebuilding package-lock.json
npm ERR! code E404
npm ERR! 404 Not Found - GET http://localhost:40033/@babel%2fplugin-syntax-import-attributes - No metadata for @babel/plugin-syntax-import-attributes
npm ERR! 404
npm ERR! 404  '@babel/plugin-syntax-import-attributes@7.22.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'StormWebsiteClient'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url. 

错误2：版本不匹配 #

[00:03] info Rebuilding package-lock.json
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @babel/compat-data@7.22.0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'StormWebsiteClient'
npm ERR! notarget
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/p4admin/.npm/_logs/2023-05-30T18_30_22_399Z-debug.log
BUILD FAILED 

已执行以下操作但未解决：

npm cache clean --force  
rm -rf package-lock.json /node_modules    
npm install

解决建议 #

1. 替换过时的Babel预设 #

Babel 7已废弃es2015、stage-*这类预设，统一使用@babel/preset-env替代。修改.babelrc为：

{
    "presets": [
        "@babel/preset-react",
        ["@babel/preset-env", {
            "targets": {
                "node": "current"
            }
        }]
    ]
}

同时删除package.json中的@babel/preset-es2015和@babel/preset-stage-0依赖。

2. 统一Babel版本 #

当前Babel相关包版本不一致，导致依赖解析混乱。将所有Babel包升级到同一系列稳定版本：

npm install --save-dev @babel/core@^7.22.15 @babel/preset-env@^7.22.15 @babel/preset-react@^7.22.15 babel-loader@^9.1.3

注意babel-loader 9.x需搭配Babel 7.15+使用，兼容性更好。

3. 检查私有npm源配置 #

错误中请求地址为http://localhost:40033，说明当前使用私有npm源，但该源未同步对应Babel包版本。可临时切换到官方源测试：

npm config set registry https://registry.npmjs.org/
rm -rf node_modules package-lock.json
npm install

若切换后成功，需联系私有源管理员修复包同步问题。

4. 避免依赖版本通配符 #

coral-super-client使用*版本会自动拉取最新版本，可能引入不兼容依赖。建议指定具体版本范围，如^x.y.z，避免意外更新导致冲突。

5. 升级Webpack相关包 #

当前Webpack 5.0.0为早期版本，且webpack-cli 3.3.10仅适配Webpack 4，版本不匹配会引发构建异常。升级到兼容版本：

npm install --save-dev webpack@^5.88.2 webpack-cli@^5.1.4

6. 锁定依赖版本 #

删除旧的package-lock.json后重新执行npm install，新生成的文件会锁定所有依赖版本，避免后续安装出现版本不一致问题。

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