为什么要配置babel？

因为在webpack中，默认只能处理一部分es6的语法，一些更高级的es6和es7语法webpack不能处理，这时就需要第三方的loader即babel来帮助webpack来处理这些高级的语法

配置步骤

1、先通过两套命令来安装loader：

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

2、在webpack.config.js配置文件中的modules节点中添加一个规则

module:{
     rules:[
         {test:/\.js$/,use:'babel-loader',exclude:/node_modules/} 
   ]     
}        

3、在根目录下创建.babelrc配置文件

作用：用来打包编译node_modules中所有第三方js文件，否则会非常消耗cpu，打包速度慢，项目会无法运行　

{
    “presets”:["env","satge-0"],
    "plugins":["transform-runtime"]
}

4、在main.js中写一段高级语法来进行测试

class Preson{
    static info = {name:'sy',age:22}
}
console.log(Preson.name)

5、输入命令npm run dev 运行

结果非常不幸，出现了错误，哭哭哭，后来在网上找到了解决方法，原来是babel-core不对

遇到的问题

应该将babel-core的版本改为7.5.1版本

npm i babel-core@7.5.1 -D

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/6751