該章節,主要的内容為介紹一下部落客在使用 babel 的技巧就是在平時使用的過程當中遇到問題之後是如何解決的,首先部落客故意寫一些錯誤寫法代碼,代碼如下:
index.js
class Person {
a = 1;
}
let p1 = new Person();
console.log(p1.a);
let p2 = new Person();
console.log(p2.a);
然後利用 webpack 進行打包,發現在打包的過程當中報錯了報錯資訊如下:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5SO0UzN5IzMlVWYjBTN0MGOyYzX0ADOzATM0IzLcVDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
發現了該錯誤之後部落客的做法就是将其中的關鍵資訊去 babel 官方進行搜尋解決方案:
發現在官方文檔當中有對應的文檔資訊,于是我就打開了該文檔進行檢視,正是部落客剛剛遇到的問題:
于是部落客就按照官方文檔進行操作,首先需要安裝一個插件:
npm install --save-dev @babel/plugin-proposal-class-properties
然後在打包 JS 的規則添加多餘的配置,内容如下:
["@babel/plugin-proposal-class-properties", {"loose": true}],
再次打包,發現就沒有之前的錯誤了,檢視打包之後檔案的内容如下:
完結,在這就是部落客大概的思路了,主要就是想讓大家知道一些使用技巧,在以後任何一門架構等插件的使用過程當中,如果出現了問題,就直接不觀察錯誤的具體内容,其實在錯誤的資訊當中已經給出了關鍵的資訊提示你,然後你在延着該資訊去對應的官方文檔或者度娘,必應,等搜尋即可