【Webpack】webpack中的babel配置

这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战

webpage只能处理一部分ES6的新语法，更高级的语法不能处理，需要借助第三方loader将高级语法转换为低级语法。这样的话我们即能使用ES6的高级语法，也可以让浏览器识别出我们的代码。 大部分时候用不上，但是如果需要在比较低级的浏览器运行时，就需要使用

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

babel@8.x 和 babel@7.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"]
}