babel是一个javascript编译工具，其主要功能是将新版本的JavaScript代码（如es6+）转换为旧版本的代码（如es5），以便能够在旧版本的浏览器或环境中运行。一般配合webpack使用。
使用npm i -D @babel/core @babel/preset-env babel-loader core-js安装babel相关依赖
配置webpack.config.js
我们需要在webpack.config.js中配置babel相关内容
// nodejs的模块 帮助我们拼接路径
const path = require("path");
// 引入html插件
const HTMLWebPackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// webpack中所有的配置信息 都应该写在module.exports中
module.exports = {//指定入口文件entry: "./src/index.ts",// 指定打包文件所在的目录output: {//指定打包后的目录path: path.resolve(__dirname, "dist"),// 打包后文件的名字filename: "bundle.js",},mode: "development", // 设置mode// 指定webpack打包时 使用的模块module: {// 指定要加载的规则rules: [{// test指定的是规则生效的文件test: /\.ts$/, //匹配所有的以ts结尾的文件use: [// 配置babel{// 指定加载器loader: "babel-loader",// 设置babeloptions: {//设置预定义的环境presets: [[// 指定环境插件"@babel/preset-env",// 配置信息{// 指定浏览器的版本targets: {chrome: "58",ie: "11",},// 指定corejs的版本corejs: "3",// 使用corejs的方法 "usage" 表示按需加载useBuiltIns: "usage",},],],},},"ts-loader",], //用tsloader来处理以ts结尾的文件exclude: /node-modules/, //排除文件},],},// 配置webpack插件plugins: [new HTMLWebPackPlugin({template: "./src/index.html",}),new CleanWebpackPlugin(),],resolve: {extensions: [".ts", ".js"],},// npm i -D @babel/core @babel/preset-env(定义好了很多环境)// npm i -D @babel/core @babel/preset-env babel-loader core-js
};
当我们兼容某些旧版本的浏览器时候，比如ie11，他不兼容es6的低版本代码，所以执行npm run build的时候会生成低版本的javascript代码
打包以后使用const定义的obj就会发现已经改成了var了 因为低版本的javascript是没有const let相关语法的。
corejs
就是javascript的补丁，在遇到低版本的浏览器的时候，他会作为工具箱，给低版本的javascript提供某些高版本的功能如Promise
比如当我们的项目使用了Promise，没有安装corejs，即使是有babel也是没用的，安装了corejs会解决这一问题
当我们尝试打印Promise 并且在webpack.config.js中添加了ie11以及corejs的配置后，编译后文件就会写入corejs自己封装的Promise，
但是如果我们运行在ie11的浏览器环境下，会发现打印依然出错，无论使不使用Promise，因为我门webpack默认编译为一个自执行的箭头函数，在低版本的javascript语法中，是没有箭头函数这个语法的，所以我们需要在webpack.config.js中配置一下。
environment: {
arrowFunction: false,
},
output: {//指定打包后的目录path: path.resolve(__dirname, "dist"),// 打包后文件的名字filename: "bundle.js",environment: {arrowFunction: false,},},这样我们打包出来的文件就不是箭头函数了
