一、babel： （官网：https://www.babeljs.cn/docs/）
1、babel 是一个 javascript 编译器；
2、babel 是一个工具链，主要用于将 ecmascript 2015+ 版本的代码转换为向后兼容的 javascript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
3、 babel的作用：
①、语法转换
②、通过 polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
③、源码转换 (codemods)
二、babel配置思路：
在webpack中，默认只能处理 一部分es6的新语法，一些更高级的es6或者es7 语法，webpack是处理不了的；这时候，就需要借助于第三方的 loader ，来帮助webpack 处理这些高级的语法；当第三方loader 把高级语法转为低级语法之后，会把结果交给 webpack 去打包到bundle.js中；
通过babel ，可以帮我们将高级的语法转换为 低级的语法：
1、在webpack 中，可以运行如下两套命令，安装两套包，去安装babel 相关的loader功能：
①、第一套包：
cnpm i babel-core babel-loader babel-plugin-transform-runtime -d
②、第二套包：
cnpm i babel-preset-env babel-preset-stage-0 -d
2、打开 webpack 的配置文件，在module节点下的rules 数组中，添加一个新的匹配规则：
①、
我要评论{ test :/\.js$/, use :'babel-loader', exclude:/node_modules/ }
②、注意：在配置babel 的loader 规则的时候，必须把node_modules目录，通过 exclude选项排除掉：原因有俩：
i、如果不排除 node_modules ，则babel 会把 node_modules 中所有的第三方js文件，都打包编译，这样，会非常消耗cpu，同时，打包速度非常慢；
ii、哪怕，最终，babel 把所有的node_modules 中的js 转换完毕了，但是，项目也无法正常运行。
3、在项目的 根目录中，新建一个叫做：.babelrc的babel 配置文件，这个配置文件，属于json 格式，所以，在写.babelrc 配置的时候，必须符合json语法规范：不能写注释，字符串必须用双引号；
①、在.babelrc 写下的配置：大家可以把 preset 翻译成 【语法】 的意思：
{
"presets": [" env","stage-0"],
"plugins": ["transform-runtime"]
}
4、目前，我们安装的 babel-preset-env 是比较新的es语法，之前，我们安装的是babel-preset-es2015，现在，出了一个更新的语法插件，叫做 babel-preset-env ,它包含了所有的 和es **相关的语法。
如对本文有疑问， 点击进行留言回复！！
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json？Protocol Buffer？FlatBuffers？
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论