移动端对es6的支持度以及babel的安装
最近的一个项目(微信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文件就在里边。