webpack打包后ie访问出现“btoa“未定义

问题描述

最近在用最新webpack5重新写配置文件时发现，在js在js中引入scss文件，打包后在chrome浏览器是并没有问题，但由于项目兼容到ie9，在ie9做测试时发现报错"btoa"未定义。mdn上查询到btoa是在ie10以上才有效。

思考解决过程

在webpack配置里已经使用对ES6的语法进行babel兼容到ie9，一开始认为是babel对typescript的语法兼容配置问题，但经过对ts文件的排查发现问题并不在babel上，看了打包的源码也发现是对css的sourcemap指向，那么就是说这些不是在于自己写的代码身上的兼容问题。于是认为是sourcemap的问题，在所有的生产模式下可以设置sourcemap的都设为false，且将devtool也设置为nosourcemap，但问题依然存在。最后终于将问题锁定在对于css的loader身上。

解决方法

对了css的编译loader进行一个个排查。我在开发环境使用的是style-loader，生产环境用了MiniCssExtractPlugin进行css分离，用了sass，配置如下：

{ test: /\.(c|sc)ss$/, include: [ resolve("src"), ], use: [ process.env.NODE_ENV === 'production' ? { loader: MiniCssExtractPlugin.loader, options: { esModule: true, publicPath: '../', //为了使背景图片路径不在css/文件下 // only enable hot in development hmr: process.env.NODE_ENV === 'development' } } : 'style-loader', 'css-loader', { loader: "postcss-loader", options: { plugins: [require('autoprefixer')], //postcss-loader，autoprefixer添加浏览器前缀，兼容不同版本浏览器 sourceMap: true } }, 'sass-loader' ] },

使用了三目运算进行判断使用对应loader。然而就是这里，没有用括号括起来才导致打包后出现的错误：

(process.env.NODE_ENV === 'production' ? { loader: MiniCssExtractPlugin.loader, options: { esModule: true, publicPath: '../', //为了使背景图片路径不在css/文件下 // only enable hot in development hmr: process.env.NODE_ENV === 'development' } } : 'style-loader'),

一个小小的错误和不良习惯给坑了。找问题整整找了两天都想不清除到底哪里错了！死磕到底。

总结

好的代码习惯才能让你少走许多坑，这是个警醒。深受其害。写下提醒自己，也为了有人跟我出现同样错误时能找到这个因习惯找不到的错误，搜索了一堆资料但是没人出现过这种问题，希望能帮到同在坑里的人。