为什么要使用babel
虽然webpack可以打包js文件,但是一些高级语法是无法识别的,因此需要使用第三方工具babel-loader,高级js语言变成低级语言
babel的安装及配置
安装
npm install -D babel-loader @babel/core @babel/preset-env webpack
npm i @babel/plugin-proposal-class-properties -D
配置
{ test: /\.m?js$/, use: 'babel-loader', exclude: /(node_modules|bower_components)/ }//处理高级js语法,如部分es6
.babelrc配置
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
说明
1、exclude: /(node_modules|bower_components)/将(node_modules或者components排除,否则babel会打包编译这两个里面的js文件,导致项目不能运行。
2、"plugins"里面写的是安装的插件
3、"presets"里面写的是语法