移动端对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文件就在里边。