天天看点

webpack-babel-使用技巧

该章节,主要的内容为介绍一下博主在使用 babel 的技巧就是在平时使用的过程当中遇到问题之后是如何解决的,首先博主故意写一些错误写法代码,代码如下:

index.js

class Person {
    a = 1;
}

let p1 = new Person();
console.log(p1.a);

let p2 = new Person();
console.log(p2.a);      

然后利用 webpack 进行打包,发现在打包的过程当中报错了报错信息如下:

webpack-babel-使用技巧

发现了该错误之后博主的做法就是将其中的关键信息去 babel 官方进行搜索解决方案:

webpack-babel-使用技巧

发现在官方文档当中有对应的文档信息,于是我就打开了该文档进行查看,正是博主刚刚遇到的问题:

webpack-babel-使用技巧

于是博主就按照官方文档进行操作,首先需要安装一个插件:

npm install --save-dev @babel/plugin-proposal-class-properties      

然后在打包 JS 的规则添加多余的配置,内容如下:

webpack-babel-使用技巧
["@babel/plugin-proposal-class-properties", {"loose": true}],      

再次打包,发现就没有之前的错误了,查看打包之后文件的内容如下:

webpack-babel-使用技巧

完结,在这就是博主大概的思路了,主要就是想让大家知道一些使用技巧,在以后任何一门框架等插件的使用过程当中,如果出现了问题,就直接不观察错误的具体内容,其实在错误的信息当中已经给出了关键的信息提示你,然后你在延着该信息去对应的官方文档或者度娘,必应,等搜寻即可

webpack-babel-使用技巧

继续阅读