前段时间发的一篇文章 微软365将放弃IE11，你却仍支持IE9？，文章中调研结果显示还有一少部分人还在兼容 IE 浏览器，具体数据可以在本文 微软365将放弃IE11，你却仍支持IE9？末尾查看。
最近遇到一个 IE 兼容问题，分享一下。做了一个新项目，在 IE 浏览器访问不了，直接报“缺少标识符”，通过错误提示，可以定位到具体的文件，但是不能定位到是哪行代码。
这种类型的错误比较常见，凭经验感觉是源代码没有经过 babel 转换，导致某些语法在 IE 浏览器上执行不了。那么就需要确认下报错文件有没有参与 babel 转换，最简单的方法是在你的代码中写入一个箭头函数（如果代码中已有箭头函数，忽略），然后从打包后的文件中查找是不是存在箭头函数，如果存在说明确实没有经过 babel 处理。
我的项目使用的是 webpack 打包，打包后会有一个 index.js 文件，在浏览器直接访问这个 js 文件，可以看到所有的 js 代码。类似下图直接搜索箭头函数 =>：
最终确认是因为，新加的文件夹没有命中打包文件的规则中。解决这个问题后还有一个问题比较坑。
在 4天快速落地团队内部的UI组件库 这篇文章中，有提到过如果快速实现 UI 组件库，在修改 element-ui 为私有 npm 包时，包名换成了 @scope/suyan-pc-ui。举个例子：
在 utils 工具 js 中，有这么一行代码：
执行 npm run dist 打包后，引用路径会发生变化（src 换成了 lib），这样能够保证组件使用的 js 代码是经过编译后的，而不是源码：
问题来了，如果换成私有 npm 包：
这样执行 npm run dist 打包后，引用路径并未发生变化。这样使用组件的时候，引用的代码就是源码，未经过 babel 转换。
遇到这个问题后，我看了 element-ui 的命令 npm run dist 都干了啥，可惜最终也没找到为啥会把 src 换成 lib。无奈之下，我写了一个脚本，把 @scope/suyan-pc-ui/src/xxx 替换成 @scope/suyan-pc-ui/lib/xxx。
这样问题就算解决了，直到写这篇文章的时候，我重新回顾了整个过程，当我执行 npm run build:utils 时，路径也可以正常替换，该命令只是执行了 babel。
"build:utils": "cross-env BABEL_ENV=utils
babel src --out-dir lib --ignore src/index.js",
最后看了下 .babelrc 这个配置文件，意外发现了：
原来在这里进行了重命名。
把这块改一下：
经过打包，问题完美解决。
通过这次教训，发现还是对 babel 没有进行一个全面的学习，其实是一件非常简单的事情，有经验的人看一下 babel 的配置就能够解决问题。痛定思痛，决定学一周 babel。在公众号内与大家分享。
大家加油！
长按关注
素燕《前端小课》
帮助 10W 人入门并进阶前端
官网：https://lefex.gitee.io/
412
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
