将 Babel 与 TypeScript 结合使用

在制作现代 JavaScript 项目时，你可能会问自己将文件从 TypeScript 转换为 JavaScript 的正确方法是什么？

使用 babel 进行转译

babel可以帮助我们解决兼容性的问题，

1.在vscode中安装插件

1. @babel/preset-env——给我们预先设置了不同的环境，安装之后使我们的代码可以兼容到不同的环境
2. babal-loader——把babel和webpack进行结合
3. core-js ——js运行环境或者说模拟js运行环境，【让老版本的浏览器用到新版本的技术】因为这个里面2内容比较多所以在babel里面有一个配置可以让我们按需进行选择

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

2. 安装完成之后修改配置文件，webpack.config.js

// 指定webpack打包时要使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            // 用ts-loader 处理以ts结尾的文件
            {
                // test 指定的是规则生效的文件
                test: /\.ts$/,    // 表示去【匹配所有以ts结尾的文件
                // t要使用的loader
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: {
                            // 设置预定义的环境
                            presets: [
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets: {
                                            "chrome": "88"   // 这里可以根据自己的需要进行选择

                                        },
                                        // 指定corejs的版本
                                        "corejs": "3",
                                        // 使用corejs的方式  "usage" : 按需进行加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader',

                ],
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },

在babel进行转换解决兼容性的问题中，

IE浏览器不支持箭头函数babel可以把箭头函数转换为普通函数 

就是这里的箭头函数，

是webpack执行打包的时候自动生成的，没有经过babel,所以会出问题，

所以我们需要在  webpack.config.js  里面添加

 // 入口文件指定完成之后对文件进行打包，把文件输出到指定的位置  【指定打包文件所在的目录】
    output: {
        // 指定打包文件的目录     __dirname,是一个成员，用来动态获取当前文件模块所属的绝对路径
        //  所以说path:path.resolve(__dirname,"dist")就是在打包之后的文件夹上拼接了一个文件夹，在打包时，直接生成。
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件名
        filename: "bundle.js",
        // 告诉webpack不使用箭头函数   重要：添加这个就可以把箭头函数转换为function 函数，就可以了
        environment: {
            arrowFunction: false
        }
    },

重点是添加了  

 // 告诉webpack不使用箭头函数   重要：添加这个就可以把箭头函数转换为function 函数，就可以了
        environment: {
            arrowFunction: false
        }

 

 这样子就可以在IE浏览器中识别promise,同时可以将打包的bundle.js 中的箭头函数改为function(){}函数