移动端对es6的支持度以及babel的安装
来源:互联网 发布:手写笔绘图软件 编辑:程序博客网 时间:2024/06/08 11:24
最近的一个项目(微信H5)上线后出现了一个问题:进入页面后没有加载到全部的文件,页面卡住,并且有如下情况:
- 大部分用户可以正常访问
- 部分用户出现问题,然后刷新、清缓存之后正常
- 个别用户反复刷新、清缓存都无法正常显示页面
正常情况下,产生这种情况的原因有很多,例如:html页面语法错误浏览器报错停止渲染、js语法错误程序报错卡住、后台返回数据有问题js报错程序卡住、cdn加载失败等等等等…
首先,作为一个菜鸡,每天在公司战战兢兢、提心吊胆的写项目,上线前都会对静态页面进行假数据测试,和后台对接后在公司内部进行本地测试、联合调试,如果有语法错误这种情况发生,恐怕也等不到上线就已经改过了…
那么,我第一时间就想到了可能是乙方给的接口(我们是丙方…)出现了问题,毕竟之前发生过很多次调用微信接口超时的现象。又或者是cdn加载超时???诚然,我这种反应是很不对的,遇到问题遇到Bug每个人的第一反应应当是先从自身找起,而不是上来就想甩锅…
在拿着复现Bug的手机经历了一上午调试后(就差逐句断点了!),终于定位到了问题的根本:let关键字,把所有带let的语句注释掉、改var之后一切运行正常…再结合所有报错机型都是iphone,让我不禁联想到了一个让很多程序员都头疼无比的东西:兼容性。(这个项目很简单,简单到我除了let并没有用什么别的es6新特性…)
按例,百度、google:
更多设备对于es6的兼容性
使用es6需谨慎,如果必须要用,请配合babel!
Mac端安装Babel
$ npm install -g babel
安装后,此时已经可以编译ES6文件,类似于编译less文件的方法:
babel -d lib/ src/
将lib/下的es6文件编译后输出到src/下
此时在终端执行一些别的操作时
会报错:
You have mistakenly installed the `babel` package, which is a no-op in Babel 6.Babel's CLI commands have been moved from the `babel` package to the `babel-cli` package. npm uninstall -g babel npm install --save-dev babel-cli
这是因为没有安装babel的命令行工具babel-cli
$ npm install -g babel-cli
接着查看版本:
$ babel -V
结果如下:
6.26.0 (babel-core 6.26.0)
现在默认的安装版本是6.x,不像之前的5.x版本,将各种插件集成在一起安装使用起来很方便,对于新手很友好,6.x版本需要手动安装你需要的插件
安装babel-preset-es2015插件,将es2015版本编译为es5版本的:
$ npm install --save-dev babel-preset-es2015
还有react的编译插件babel-preset-react,es7不同阶段提案的插件babel-preset-stage-0(0-4)等等。
配置.babelrc文件
终端下进入安装babel的目录(推荐本地安装,即项目目录下)
$ touch .babelrc
接着打开文件进行编辑
$ open .babelrc
将下面代码复制进去
{ "presets": ["es2015"], "plugins": []}
注意这里有个坑,mac的文本编辑器打出的引号在以后终端进行编译的时候会导致读取.babelrc文件失败编译报错,直接粘贴即可。
配置项目目录下的package.json文件
{ "name": "xxx", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "babel src -d lib" //注意这里 }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-env": "^1.6.0" }, "dependencies": { "babel-preset-es2015": "^6.24.1" }}
如果没有package.json文件,在终端进入这个文件夹执行命令:
npm init -y
就会出现package.json
配置”scripts”{“build”:”babel src -d lib”},同时在项目目录下新建一个src文件夹,此时把需要编译的es6文件放进src目录下,终端执行命令:
$ npm run build
会发现目录下自动生成了一个lib文件夹,而编译好的js文件就在里边。
- 移动端对es6的支持度以及babel的安装
- react基于webpack和babel以及es6的项目搭建
- 关于webpack,babel,以及es6和commonJS之间的联系
- ES6部分方法点评(三):babel-preset-es2015-loose可转换且移动端兼容性较好的语法
- nodejs支持ES6语法(BABEL)
- ES6语法的reactjs组件babel编译
- ES6之Babel的各种坑总结
- ES6之Babel的各种坑总结
- ES6之Babel的各种坑直接
- ES6之Babel的各种坑总结
- babel es6转码的基本用法
- babel的安装
- 谈谈JSDOC对ES6的支持
- ES6: babel配置与babel-clic安装
- 深入浅出 ES6:ES6 与 Babel / Broccoli 的联用
- es6转为es5:Babel下的ES6兼容性与规范
- es6 babel转码器安装配置
- gulp和babel的安装
- OpenStack LBaaS之Octavia
- viewpager+fragment
- tiny4412 Uncompressing Linux..... done, booting the kernel
- codevs1301 任务分配(容斥原理)
- sql-all,any,some
- 移动端对es6的支持度以及babel的安装
- 最小割模型汇总
- (UVALive
- Docker与virtualenv
- Java获取当前时间的年月日方法
- 坑了我一个下午的问题!!!
- 网络编程--TCP
- Websphere kill进程
- Cloudera Manager安装Hive各种坑解决方案