欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack中配置babel

程序员文章站 2022-03-21 18:08:55
为什么要配置babel? 因为在webpack中,默认只能处理一部分es6的语法,一些更高级的es6和es7语法webpack不能处理,这时就需要第三方的loader即babel来帮助webpack来处理这些高级的语法 配置步骤 1、先通过两套命令来安装loader: npm i babel-cor ......

为什么要配置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不对

转载自:

遇到的问题

webpack中配置babel

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

npm i babel-core@7.5.1 -d

webpack中配置babel