webpack、babel、react 安裝及配置

webpack安裝

經(jīng)常會(huì)遇到 webpack 安裝 cli和dev或出現(xiàn)版本不兼容的情況，以下是我使用的，供參考：
  • "webpack": "^4.46.0",
  • "webpack-cli": "^3.3.12",
  • "webpack-dev-server": "^3.11.2"
// 安裝webpack-cli和webpack-dev-server要注意版本，默認(rèn)安裝的可能會(huì)比webpack高，出現(xiàn)報(bào)錯(cuò)問題。
cnpm i webpack@4 -D
cnpm i webpack-cli@3 webpack-dev-server@3 -D
寫在配置文件
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open 3000 --hot --progress --compress --host 127.0.0.1"
  },

// --procress 打包記錄
// --compress  在走網(wǎng)絡(luò)時(shí)候做下壓縮
// --host 指定域名

babel安裝

  • "babel-core": "^6.26.3",
  • "babel-loader": "^7.1.5",
  • "babel-plugin-transform-runtime": "^6.23.0",
  • "babel-preset-env": "^1.7.0",
  • "babel-preset-stage-0": "^6.24.1"
  • "babel-preset-react": "^6.24.1",
 <!--如果直接安裝cnpm i babel-core babel-loader babel-plugin-transform-runtime -D,這里的babel-loader的版本是8，會(huì)報(bào)警告提示。-->

cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
cnpm i babel-preset-react -D

在項(xiàng)目中使用 react

專門用于創(chuàng)建組件，同時(shí)組件的生命周期都在這個(gè)包中，react-dom ：專門進(jìn)行DOM操作，最主要的用用場景，就是ReactDOM.render()

  • "react": "^17.0.2",
  • "react-dom": "^17.0.2"
cnpm i react react-dom -S react
這樣安裝的依賴運(yùn)行項(xiàng)目沒問題了，如有問題，歡迎大家指責(zé)～
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容