webpack中的babel配置

webpage只能处理一部分ES6的新语法，更高级的语法不能处理，需要借助第三方loader将高级语法转换为低级语法
大部分时候用不上，但是如果需要在比较低级的浏览器运行时，就需要使用

babel@7.X

1.安装babel相关的包

第一套包

cnpm install babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D

第二套包

cnpm install babel-preset-env babel-preset-stage-0 -D

都要安装

2.配置webpack.config.js

在module节点下的rules数组中，添加一个新的匹配规则

{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}

排除现成的第三方包
不然webpack会将所有js进行打包
就算将node_modules中的js打包完成，也运行不了

3.在根目录中新建一个配置文件(.babelrc.json)

最前面不需要加其他的东西
（sjon格式不能加注释）

{
//预设，语法
 "presets":["env","stage-0"],
 "plugins":["transform-runtime"]
}

4.babel@7.X的几点说明

1. 包的作用
   第一套是语法转换器
   第二套是语法对应规则
2. babel-preset-env包含了所有babel-preset-es****

babel@8.X

1.安装babel相关的包

安装babel-loader

cnpm install  babel-loader -D

安装一堆包

@babel/core
@babel/plugin-proposal-class-properties
@babel/plugin-transform-runtime
@babel/preset-env
@babel/runtime
相比于7.x全部加了个@，都以babel/开头了

cnpm i '@babel/core' -D

这里的单引号不能省略，因为都以@开头

//安装完的版本
	 "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/runtime": "^7.8.4",

2.配置webpack.config.js

在module节点下的rules数组中，添加一个新的匹配规则

{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}

3.在根目录中新建一个配置文件(.babelrc.json)

{
     //预设，语法
     "presets":["@babel/preset-env"],
     "plugins":["@babel/transform-runtime"]
}