webpack中配置babel

来源:https://www.cnblogs.com/lijianshen/archive/2019/12/02/11972762.html

為什麼要配置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不對

轉載自:https://blog.csdn.net/weixin_43086811/article/details/82154795

遇到的問題

應該將babel-core的版本改為7.5.1版本


您的分享是我們最大的動力!

更多相關文章
  • 項目是一個即時聊天的社交軟體,聊天流採用的是UICollectionView,隨著進度的完善,發現一個特別的bug,UICollectionviewCell的復用,並沒有直接insert進去,而是出現了莫名奇妙的插入方式, 這不是我的圖,這是我在網上找到的,跟我的效果一樣一樣的。link the i ...
  • 寫這篇文章的原因 在移動端一般很少使用複雜的表單,一般針對於屬性的更改都會打開一個新的頁面進行更改。雖然不多,但是也會有。如果一個頁面要輸入的內容包括姓名、地址、郵箱、手機號等,對各個屬性的驗證會非常麻煩,並且非常的不優雅。 於是, 就出現了,一種基於規則的 輸入驗證庫,通過註解即可標註驗證規則。 ...
  • 背景 因為公司一個app項目需要擴展,因為功能較多且較完整的流程與業務,而且和以前的業務關係不大,所以我整合到了 另外一個分包中(代號:newFunc,請註意是代號)進行依賴。 當我寫完這部分業務開始進行debug的時候我發現了這個錯誤。 上述中我得出already這個關鍵字,在對分包的集成測試中沒 ...
  • 下載 "demo和工具下載鏈接SPClipTool" 使用說明 需求 圖片裁剪,效果如下圖,支持圖片拖拽,縮放,裁剪框自由變換大小。 思路 兩個UIImageView,一個做背景,並加上蒙版效果,另外一個通過蒙版控制顯示區域,並且保證兩個UIImageView平移和縮放的時候完全重疊。最後使用一個U ...
  • <input /> 標簽是我們日常開發中非常常見的替換元素了,但是最近在刷 whattwg 跟 MDN 的時候發現 跟 <input /> 有很多相關的屬性,選擇器都沒怎麼用過,所以就開篇文章來整理一下一些比較有趣或者實用的知識點。 本篇文章預設大家已經知道 <input /> 標簽的基本用法,不會 ...
  • js日期函數 ...
  • 在用Layui table 分頁顯示數據,用 type:"numbers" 進行顯示序號有以下的問題 1、表格自帶的分頁,page:true 這種分頁,在切換頁面的時候序號可以正常進行增加顯示,代碼如下: 顯示效果,第二頁的起始序號不是1 2、page組件進行分頁 這種分頁,在切換頁面的時候序號一種 ...
  • 在Canvas中進行碰撞檢測,大家往往直接採用游戲引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)內置的碰撞檢測功能,好奇的你有思考過它們的內部運行機制嗎?下麵將針對基本的碰撞檢測技術進行講解: 1、基於矩形的碰撞檢測 所謂碰撞檢測就是判斷物體間是否發生重疊,這裡我們假設討論的碰撞體 ...
一周排行
  • 前言 上一篇文章主要介紹了ObjectPool的理論知識,再來介紹一下Microsoft.Extensions.ObjectPool是如何實現的. 核心組件 ObjectPool ObjectPool 是一個泛型抽象介面,他抽象了兩個方法Get和Return Get方法用於從對象池獲取到可用對象,如 ...
  • 國內優秀的WPF開源控制項庫,Panuon.UI的優化版本。一個漂亮的、使用樣式與附加屬性的WPF UI控制項庫,值得向大家推薦使用與學習。 今天站長(Dotnet9,站長網址:https://dotnet9.com, 微信公眾號:dotnet9_com)推薦另一款開源的WPF控制項庫(PanuonUI. ...
  • WGS-84坐標系:全球定位系統使用,GPS、北斗等 GCJ-02坐標系:中國地區使用,由WGS-84偏移而來 BD-09坐標系:百度專用,由GCJ-02偏移而來 (PS:源於項目需求,本來是想讀圖片的經緯度顯示在百度離線地圖上的。後來發現定位偏差太大,仔細一想,原來是圖片和百度使用的坐標系不一樣。 ...
  • .NET Core3.1發佈 我們很高興宣佈.NET Core 3.1的發佈。實際上,這隻是對我們兩個多月前發佈的.NET Core 3.0的一小部分修複和完善。最重要的是.NET Core 3.1是長期支持(LTS)版本,並且將支持三年。和過去一樣,我們希望花一些時間來發佈下一個LTS版本。額外的 ...
  • based on https://stackoverflow.com/questions/659013/accessing-a-shared-file-unc-from-a-remote-non-trusted-domain-with-credentials ...
  • private static void PathCopyFilesWithOriginalFolder() { int sourceFilesNum = 0; try { string sourceDir = @"E:\Source"; string destDir = @"E:\Dest"; st... ...
  • 前言 上一次資料庫災備和性能優化後,資料庫專家建議,在不擴容的情況下,客戶端不能再頻繁的掃描資料庫了!一句驚醒夢中人,因為我也發現資料庫越來越卡了,自從上個項目上線後,就出現了這個情況。後來分析其原因,發現客戶端每3秒中掃描一次資料庫,一共5000+客戶端,可想而知,頻繁掃描嚴重影響到資料庫性能。所 ...
  • 2019.12.4今天開通博客,跌跌撞撞學了3年C#,感覺有了基礎但還不夠深入,有些東西學了又忘,特此開通博客做一個記錄,記錄下以後學習中的每一個知識點,再接再厲,每天進步一點點!!!!!! ...
  • 本人剛接觸.net core 由於公司項目需要部署在Linux上 近些日子學習和網上大面積搜教程 我在這給大家歸攏歸攏借鑒的教程做了套方案(我寫的可以實現 但不一定是最好的 僅供參考) 我只用過core3.0 之前的版本沒接觸過 首先需要使用Nginx反代理的項目那一定是web框架的ASP.NET ...
  • WinFrm應用程式調用WebService服務 關於WebService的創建、發佈與部署等相關操作不再贅述,傳送門如下:C# VS2019 WebService創建與發佈,並部署到Windows Server 2012R 此篇記錄一下客戶端的調用,以便後續學習使用,不足之處請指出。 建立WinF ...
x