typescript学习笔记2 配置浏览器兼容性

webpack.config.js

需要安装的插件：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.22.8",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.3.0",
    "typescript": "^4.7.3",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.2"
  }

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  optimization: {
    minimize: false, // 关闭代码压缩，可选
  },
  //   model:""
  entry: "./src/index.ts",

  devtool: "inline-source-map",

  devServer: {
    // 设置静态目录
    // contentBase: "./dist", 最新版不能用
    static: {
      // static: ['assets']
      directory: path.join(__dirname, "./dist"),
    },
  },

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    environment: {
      arrowFunction: false, // 关闭webpack的箭头函数，可选
      
      // 默认情况下 webpack编译的文件必然有箭头函数，ts->js->兼容js->webpack打包
      // webpack添加箭头函数在babel打包之后，所以后面添加的箭头函数，babel无法转换
    },
  },

  resolve: {
    // 以ts和js结尾的可以作为模块引入
    extensions: [".ts", ".js"],
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: {
          // 从后往前执行,先将ts变成js，再讲js兼容
          loader: [{
            loader:"babel-loader",
            // 设置babel
            options:
                {
                  // 设预定义的环境（@babel/preset-env提供）
                  presets:[
                      [
                          // 指定环境插件
                          "@babel/preset-env",
                          // 配置信息
                        {
                          // 要兼容的目标浏览器版本
                          targets:
                              {
                                "chrome":"88", // 兼容到Chrome 88
                                "ie":"11" // 兼容


                              },

                          // core.js 处理Promise，反射，代理等
                          // 指定core.js的版本
                          "core.js":"3",
                          // 使用corejs的方式"usage" 表示按需加载
                          "useBuiltIns":"usage"

                        }
                      ]
                  ]
                }
          },"ts-loader",],
        },
        exclude: /node_modules/,
      },
    ],
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 自动生成模板的标题，自定模板
      title: "TS测试",
      // 模板
      template:"./src/index.html"
    }),
  ],
};

（1）其中最重要的的是environment 属性,ts兼容性流程是ts-loader将ts变成js，这一步只是转成对应的版本的语言，没有做兼容性，然后babel-loader在将js转为模板兼容浏览器，所能执行的代码，再由webpack打包，最后一步默认会使用箭头函数，所以低版本浏览器使用了babel依然会报错，所以低版本浏览器不应该使用箭头函数
（2）loader是从后向前执行的，contentBase: “./dist” 最新版本中不能用