react jsx babel環境配置

2021-10-04 18:08:53 字數 1173 閱讀 2572

首先我們為什麼要對乙個react環境進行babel配置呢？

react專案中如果不借助腳手架我們要寫入乙個html的話，方法是

import react from 'react'


import reactdom from 'react-dom'


const myspan = react.createelement('span',null, '這廝乙個text文字')


const div = react.createelement('div', , myspan,'這是乙個div元素')
這個時候如果我們要實現html複雜的巢狀關係的話，其實是非常困難的，所以我們採用了jsx的寫法

第二個問題 ： 什麼是jsx？，jsx就是用來宣告react當中的元素，react使用jsx來描述使用者介面

常見的jsx的寫法是 

const mydiv  = 這是乙個常見的jsx格式
這個時候問題來了，等號右面是一段html標記語言，放在js中只會報錯，所以在react中我們需要乙個loader來解決這個問題的

這個loader就是我們的babel-loader 

現在就讓我們來配置下這個babel-loader吧

首先我們需要安裝babel和babel的一些外掛程式

1.npm install -d  @babel/core @babel/preset-env @babel/preset-react babel-loader @babek/plugin-transform-runtime

@babel/core 核心包

@babel/preset-env 解析es的包,智慧型識別當前執行環境並進行轉換

@babel/preset-react 解析jsx的包

@babael/plugin-transform-runtime 使es6中的api類似generator,promise物件等生效

2.對webpack.config.js 中的module進行配置

module: 


},exclude:/node_modules/}]


}
這個東西我在配置的時候有點坑就是babel公升級到7.x之後那些外掛程式和模組的寫法都變成了@babel/的寫法了，並且廢除了babel-preset-stage-0，具體的坑可以看下這篇文章

開發環境 測試環境 預生產環境 生產環境區別

環境分以下幾種 1.開發和配置環境 所有的開發和配置在這個環境裡進行。一般情況下，只有這個環境可以改配置和進行開發，並且一般不在這個環境下建立資料。開發環境就是每個開發人員電腦上的開發環境，只有開發人員可以配置和開發，寫資料測試放在測試環境 2.測試環境 3.預生產環境 不是必須的 從生產環境不定期...

開發環境 測試環境 預生產環境 生產環境區別

環境分以下幾種 1.開發和配置環境 所有的開發和配置在這個環境裡進行。一般情況下，只有這個環境可以改配置和進行開發，並且一般不在這個環境下建立資料。開發環境就是每個開發人員電腦上的開發環境，只有開發人員可以配置和開發，寫資料測試放在測試環境 2.測試環境 3.預生產環境 不是必須的 從生產環境不定期...

開發環境 測試環境 生產環境 區別

開發環境 測試環境 生產環境 區別 開發環境 development 開發環境時程式猿們專門用於開發的伺服器，配置可以比較隨意，為了開發除錯方便，一般開啟全部錯誤報告和測試工具，是最基礎的環境。測試環境 testing 一般是轉殖乙份生產環境的配置，乙個程式在測試環境工作不正常，那麼肯定不能把它發布...