【早期2018.07.30】jquery项目babel问题

遇到的问题

2018.07.30号，星期一。在项目中install了babel，但是没有配置.babelrc文件。使用es6语法导致低版本手机的js代码加载不出来。

babel的使用

• 安装babel

① 安装babel的前提是要有package.json文件。使用npm命令：npm init --y生成package.json文件。

② npm install -g babel-cli 全局安装babel-cli。

③ npm install --save-dev babel-cli 项目中安装babel-cli。

④ npm install --save-dev babel-preset-es2015 安装转码规则。官方提供以下的规则集

         # ES2015转码规则

         $ npm install --save-dev babel-preset-es2015

         # react转码规则

         $ npm install --save-dev babel-preset-react

         # ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个

         $ npm install --save-dev babel-preset-stage-0

         $ npm install --save-dev babel-preset-stage-1

         $ npm install --save-dev babel-preset-stage-2

         $ npm install --save-dev babel-preset-stage-3

• 配置.babelrc

在根目录下新建.babelrc文件，内容如下

{

  "presets": [

    //转码规则，注意安装了什么写什么，多写会报错

   "es2015"

  ],

  "plugins": [

         //插件支持

  ]

}

总结

在vue-cli下，项目会自动安装.babelrc文件，而且会自动配置好。所以在做云助的时候（jquery项目），以为只要安装了babel就会自动配置完成。然而，并不是这样的。这值得深刻反思，现在的学习状态是，只要需求实现了就不去深究是为什么，下次遇到了类似的坑还是一样会"义无反顾"的踩下去。以后要做到碰到问题及时总结。