Error: [BABEL] E:\tsstudy\part3\src\index.ts: .targets is not allowed in preset options TypeScript

在为webpack进行配置完后并且下载了对应的依赖，允许npm run build，发现了报错。

检查代码

（1）检查Bable配置文件（这里都是最新版本）

{
  "name": "part3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "start": "webpack serve --open chrome.exe"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.24.4",
    "@babel/preset-env": "^7.24.4",
    "babel-loader": "^9.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.37.0",
    "html-webpack-plugin": "^5.6.0",
    "ts-loader": "^9.5.1",
    "typescript": "^5.4.5",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

（2）检查index.ts文件

function sum(a: number, b: number): number {
    return a + b;
}
console.log(sum(2, 3));
console.log(sum(2, 3));

（3）检查webpack.config.js文件

//引入一个包，基本配置
const path = require('path');
//引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

//webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
    mode: 'production',
    //指定入口文件
    entry:"./src/index.ts",
    //指定打包文件所在目录
    output:{
        //指定打包文件的目录
        path:path.resolve(__dirname,"dist"),
        //打包后文件的文件
        filename:"bundle.js",
        //告诉webpack不使用键头
        environment:{
            arrowFunction:false
        }
    },
    //指定webpack打包时要使用的模块
    module:{
        //指定要加载的规则
        rules:[
            {
                //test指定的是规则生效的文件
                test:/\.ts$/,
                //要使用的loader
                use:[
                    {
                        //指定加载器
                        loader:'babel-loader',
                        //设置babel
                        options:{
                            //设置预定义的环境
                            presets:[
                                //指定环境的插件
                                '@babel/preset-env',
                                //配置信息
                                {
                                    //要兼容的目标浏览器
                                    targets:{
                                        "chrome": "88",
                                    },
                                    //指定core-js的版本
                                    "corejs":"3",
                                    //使用core-js的方式”usage“表示按需加载
                                    "useBuiltIns": "usage"
                                }
                            
                                ]
                        }
                    },
                    'ts-loader'
                ],
                //要排除的文件
                exclude:/node_modules/,
            }
        ]
    },
    //配置webpack插件
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
           // title:"这是自定义的title"

            //这个网页就成了插件模板
            template:("src/index.html"),
        }),
    ],
    resolve:{
        //告诉编译器，凡是以ts，js结尾的文件都可以作为模块使用
        extensions:['.ts','.js']
    }
};

发现问题

少了一个[]，那为什么会因为少[]就会报错呢？

我突然理解了，每一个preset是一个数组，我没有[]就相当于我没有使用数组包裹@babel/present-env，这是Babel配置的格式要求，如果不按照预期格式进行配置，Babel解析器法务正确解析，从而导致报错，修改之后，Babel就可以正确低读取并应用配置了。
运行成功