使用webpack打包ts代码（3）

@babel/core 插件

现在我们要安装一个 @babel/core 插件，因为打包后的代码很可能无法满足低版本浏览器使用，比如箭头函数打包后依然是箭头函数

@babel/core 是Babel的核心模块。Babel可以将ES2015+的代码向老版本兼容，而没有@babel/core的话，Babel无法进行编译

@babel/core 可以将js代码分析成 ast（抽象语法树），从而让其他插件分析语法进行处理。像一些新语法便通过ast分析语法，然后转为低版本的js

安装

yarn add @babel/core --dev

这时候，如果你想编译箭头函数，便需要在plugins中配置箭头函数的插件，同样的，想编译什么新语法，都要相应的配置。这太麻烦了。

@babel/preset-env 插件
可以对babel进行预设置，是一组插件的集合，并依赖于一些插件

yarn add @babel/preset-env --dev

babel-loader 插件
这个插件可以将ES6的代码，转换为ES5的代码

yarn add babel-loader --dev

//webpack.config.js

core-js 插件
这个插件主要用于为浏览器提供对最新JavaScript标准库特性的支持。

yarn add core-js --dev

安装完后，要进行如下配置

module.exports = {

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          //Loaders 可以通过传入多个 loaders 以达到链式调用的效果，
          //它们会从右到左被应用（从最后到最先配置）
          {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                  //兼容ie11版本
                      targets: {
                      ie: "11",
                    },
                    //按需加载
                    useBuiltIns: "usage",
                    //corejs 要用的版本
                    corejs: "3.22",
                  },
                ],
              ],
            },
          },
          "ts-loader",
        ],
        exclude: /node_modules/,
      },
    ],
  },
};

这时候，我们写的新语法都会被babel-loader转化为兼容ie11的语法。但是如果我们打开打包后的 bundle.js,会发现最开始就是一个箭头函数

这是webpack生成的，无法被babel-loader解析，加上以下配置就好了

module.exports = {
  output: {
    environment: {
      arrowFunction: false,
    },
  },
};