配置babel loader處理JSX語法

2022-07-19 13:18:14 字數 570 閱讀 4791

在webpack中,jsx語法是不被webpack識別的,webpack預設只能處理.js字尾名的檔案,需要安裝第三方loader處理非js檔案。

而jsx語法,可以使用babel-loader處理。

一開始參照官網配置,但是報錯資訊顯示還是不能識別jsx語法,錯誤配置是這樣的:

npm install -d babel-loader @babel/core @babel/preset-env

module: 

},exclude: /(node_modules|bower_components)/, //

千萬別忘記新增exclude選項,不然執行可能會報錯

}, ]

}

查了網上的一些解決辦法,並自己摸索了一下,需要再安裝@babel/preset-react,並修改.babelrc的配置。

最終正確的webpack 4.x版本babel-loader對應配置如下,如果不對應版本進行配置,會出現很多問題。

babel loader7和babel8版本的問題

根據官網要對應版本 1.要安裝的包 第1套包 npm i babel core babel loader 7 babel plugin transform runtime d 千萬記得是babel loader 7,不是其他的 第2套包 npm i babel preset env babel pr...

Golang TOML配置處理

但我們又遇到了乙個問題,乙個專案通常是有很多配置的,比如php的php.ini檔案 nginx的server.conf檔案,那麼golang的專案又適合使用怎樣的配置檔案呢?其實現在我們有很多選擇,比如 json檔案 ini檔案 yaml檔案和toml檔案等等。其中這些檔案,對應的golang處理庫...

事務tx配置處理

1.propagation 事務傳播機制。該屬性可選的值有如下幾種。1.required 預設值,表示如果存在乙個事務,則支援當前事務 如果當前沒有事務,則開啟乙個新的事務。2.requires new 表示總是開啟乙個新的事務。如果乙個事務已經存在,則將這個存在的事務掛起,開啟新事務執行該方法。3...