babel向后兼容

除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器。

1、安装依赖包：

npm i -D @babel/core @babel/preset-env babel-loader core-js

@babel/core：babel的核心工具

@babel/preset-env：babel的预定义环境

@babel-loader：babel在webpack中的加载器

core-js：core-js用来使老版本的浏览器支持新版ES语法

2、修改webpack.config.js配置文件

...略...
module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
            	// 配置 babel
                {
                	// 指定加载器
                    loader: "babel-loader",
                    // 设置 babel
                    options:{
                    	// 设置预定义的环境
                        presets: [
                            [
                            	// 指定环境的插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                	// 要兼容的目标浏览器版本
                                    "targets":{
                                        "chrome": "88",
                                        "ie": "11"
                                    },
                                    // 指定 corejs 的版本
                                    "corejs":"3",
                                    // 使用 corejs 的方式。"usage" 表示按需加载
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}
...略...

如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。