webpack 打包 TS 时的常见问题
使项目可以兼容更多的浏览器
-
babel 可以使 TS 转换为一些老浏览器支持的语法。
-
使用步骤:
-
使用
npm i -D @babel/core @babel/preset-env babel-loader core-js
-
修改 webpack.config.js 的配置:
module: { // 指定要加载的规则 rules: [ { // test 指定的是规则生效的文件 test: /\.ts$/, // 要使用的 loader use: [{ // 指定要用的加载器 loader: "babel-loader", // 设置 babel options: { // 设置预定义环境 preset: [ [ // 指定环境的插件 "@babel/preset-env", // 配置信息 { // 要兼容的目标浏览器 targets: { "chrome": "88" }, // 指定 corejs 的版本 "corejs": "3", // 使用 corejs 的方式 "useBuiltIns": "usage" // 表示按需加载 } ] ] } },'ts-loader'], // 要排除的文件 exclude: /node_modules/ } ] }
-
webpack 在打包时会创建一个立即执行的箭头函数,导致 ie11 不兼容
解决方案:
-
设置 webpack.config.js 的配置。
output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", // 告诉 webpack 不使用箭头函数 environment: { arrowFunction: false // 关闭 webpack 的箭头函数,可选 } },