不用webpack打包工具的项目如何使用babel-pollyf
我们的线上产品上线后中高财富理财平台(在手机微信上打开效果最好),偶尔有同事说网页打不开,不断刷新也一直显示空白。我拿过同事的手机看看,她的手机是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目录。
找到这个目录:
点击进入babel-polyfill文件夹,点击进入dist目录:
将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没有任何错误信息了。
软件开发,不要畏惧问题,相反,应该欢迎问题。遇到问题也是接触和学习新知识的契机。