react 進行babel轉化jsx執行之後報錯

2021-09-10 19:37:03 字數 1134 閱讀 8398

在進行react的專案搭建的過程中,搭建到babel轉化jsx語法,然後就爆了如下的各種錯誤:

比如:終端執行:cnpm i babel-core babel-loader babel-plugin-transform-runtime  -d

cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -d

之後執行npm run dev

大體查詢到的原因是babel-loader要使用7.幾版本的,我終端執行上面命令的時候裝的是8.幾版本的,刪除原本的babel-loader又報錯,,

在解決這個問題的過程中爆出了各種錯誤,,,心很累啊;;;;

之前寫過react的專案,在之前的react的專案用了yarn託管,所以嘗試一了一把,用yarn裝指定版本的babel-loader,在查詢關於這個錯誤的時候貌似要用到@babel/core,所以順手裝了乙個;

解決方式如下:

在搭建了基本的react專案之後,先裝yarn ,命令是:npm install yarn -g

然後用yarn裝@babel/core:yarn add @babel/core --dev

之後再裝所需要的,我裝了這些:

yarn add [email protected]

yarn add babel-plugin-transform-runtime

yarn add babel-preset-env babel-preset-stage-0 babel-preset-react

yarn add babel-core

在專案根目錄新建.babelrc資料夾,寫入:

在webpack.config.js中寫入:

module: ,]}

裝上這些專案執行無誤了;

babel來進行js轉換

一.babel 含義 通天塔,取統一人類的行動中的統一的意思.1.將各種我們日常開發中用的順手的語言 比如es6,typescript 編譯成 不同版本瀏覽器能識別的 語言 2.babel本身只是分析,真正的語言轉換交給外掛程式來完成 二 安裝 1.安裝命令 npm install babel co...

3 react 使用babel啟用jsx

import react,from react import reactdom from react dom const myh1 react.createelement h1 這是乙個h1 這種麻煩,使用html是最好的標記語言 const myh1 這是乙個div標籤 react做了一層封裝,但...

React之propsTypes進行型別的檢查

react中propstypes的主要作用就是用於對傳入引數的屬性的檢查。如 import proptypes from prop types class greeting extends react.component greeting.proptypes 其中,name proptypes.st...