天天看點

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-使用技巧

繼續閱讀