我们的线上产品上线后中高财富理财平台（在手机微信上打开效果最好），偶尔有同事说网页打不开，不断刷新也一直显示空白。我拿过同事的手机看看，她的手机是iphone 6s，系统是iOS10以上的，在微信上打开，理论上肯定没问题啊，因为我的手机也是iphone 6s，iOS10以上的系统，我的手机在微信、safari上打开都是正常的。
理论归理论，开发一定要从实际出发，逐层排除，找出root cause。
由于ie的兼容性是最差的，所以我先从ie下手。
在ie上打开网页，点击F12进入开发者模式，查看console是否显示异常信息。果然见到console显示
SCRIPT1003: 缺少 ':'
这个错误信息说明项目的js代码包含ES6语法，而该浏览器不支持ES6语法。由于项目用到vue、vuex、vue-router等vue的核心模块，而vue2.0默认是用ES6语法开发的，在项目上线前我都会用Babel 将js代码统一转成ES5语法。由于项目没有使用webpack等打包工具，在上线前我都是将代码用工具合并成若干个js文件，再直接在Babel在线转ES5 上将js代码转成ES5语法。由于疏忽，presets配置选项没有选择ES2016以以上的语法，所以在转换解析时没有解析到ES6语法，导致转换后的代码依然包含ES6语法。
重新配置了Babel presets将代码转换成ES5后，再在ie上打开网页，console又显示另一个错误信息了：
SCRIPT5022: [vuex] vuex requires a Promise polyfill in this browser.
这个错误信息很明了了，vuex需要promise，而浏览器不支持。
Babel默认只转码ES6的新语法(syntax)，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法(比如Objectassign、Array.from)都不会转码。
如果想让这些方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
参考文章JS - Babel使用详解3（使用babel-polyfill实现对ES6新API的支持）
关于babel-polyfill的介绍，到Babel官网polyfill的主页。
Babel官网提供了在webpack等打包环境下安装babel-polyfill。在browser环境下，也即不用打包工具，可以在babel-polyfill安装文件夹的dist文件夹下找到polyfill.js和polyfill.min.js两个文件，polyfill.js用于开发环境，polyfill.min.js用于发布环境。
如何安装nodejs和npm可以参考这篇文章nodejs安装配置。
在win10下我选择安装.msi安装包，一直默认配置next，默认安装在C盘program目录下。
安装后执行：
C:\Users\Administrator>node --version
v8.9.0
C:\Users\Administrator>node -v
v8.9.0
C:\Users\Administrator>npm -v
5.5.1
C:\Users\Administrator>npm install babel-polyfill
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Administrator\package.json'
npm WARN Administrator No description
npm WARN Administrator No repository field.
npm WARN Administrator No README data
npm WARN Administrator No license field.
+ babel-polyfill@6.26.0
added 5 packages in 4.84s
表明babel-polyfill安装成功，那安装成功之后打包的dist文件夹下的polyfill.min.js在哪里呢？
查看babel官网的babel-polyfill安装教程，
有这么一段话：
$ npm install babel-polyfill
To add this npm package to your local machine, type the above into your command line. You’ll notice a node_modules directory appear in your root where the package is now installed.
这句话的意思是用npm安装babel-polyfill之后，会生成一个node_modules目录。
找到这个目录：
image.png
点击进入babel-polyfill文件夹，点击进入dist目录：
image.png
将polyfill.min.js导入项目，比如我的html文档文件结构：
<html>
<head>
</head>
<body>
<script src="assets/lib/jquery/jquery.min.js"></script>
<script src="assets/lib/babel/polyfill.min.js"></script>
<script src="assets/lib/vue/vue.min.js"></script>
<script src="assets/lib/vue/vuex.min.js"></script>
<script src="assets/lib/vue/vue-router.js"></script>
</body>
</html>
我的项目结构中，assets/lib目录下统一放js库和插件，polyfill.min.js文件就放在assets/lib/babel目录下。
重新打包上线后，在ie上打开中高财富理财平台，这一次界面正常显示出来，console没有任何错误信息了。
软件开发，不要畏惧问题，相反，应该欢迎问题。遇到问题也是接触和学习新知识的契机。
网友评论