React開發環境配置詳細講解-04

React環境

前端隨著規范化,可以說規范和環境插件配置滿天飛,筆者最早接觸的是jquery,那個開發非常簡單,只要引入jquery就可以了,當時還寫了一套UI框架,至今在做小型項目中還在使用,show一張效果圖吧,當作留念了:
在這里插入圖片描述
后來出現了Vue、Angular等,那語法格式實在費解,果斷放棄了前端,后來又幾經分分合合,至今算是集中在了React上了,但當初需環境時也是費了好大勁,為了剛接觸的同學好理解,特意整理一下開發中關于React的環境配置,大體環境關系如下:
在這里插入圖片描述

  1. nvm:需要最先安裝,用于對node.js解釋器進行管理,相當于node.js的版本管理器,因為React開發需要node.js的支持;
  2. node.js:安裝好nvm后就需要安裝node.js了,它可以理解為java的jdk;在React開發中可以理解為React的運行環境;
  3. npm:React開發需要依賴各種不同的三方庫,npm就是用于下載不同的三方庫用,可以理解為java開發中的maven;
  • cnpm:功能同npm,因為npm的庫包服務器在國外,下載速度有時會很慢,cnpm連接的是國內服務器;
  • yarn/tyarn:功能同npm,也是由于npm庫在國外的原因,開發的另一個版本管理工具;
  1. 腳手架:這個不用解釋了,網上N多,筆者主要用三個:學習使用(create-react-app),工作使用(ant-design,MUI),前者是官方給的,后者是三方開發的;
  2. webpack:React應用打包工具;
  3. babel:JSX語法轉譯工具,在React開發中會用到JSX語法(Facebook開發的一種被二次封裝的js語法,主要是為了簡化代碼),這種語法不能被瀏覽器直接識別,因此在運行前需要一個類似編譯的過程;
  4. sass:css預處理器,這個是可選的,主要看css用哪種語言實現;

以上這些開發工具npm和nvm會使用的比較頻繁,另外node.js和npm有一個版本對應關系。詳細可查看https://nodejs.org/zh-cn/download/releases/網站查詢。

工具安裝

下列命令全是在筆者用的是MacOS系統下執行的,其它系統可查看官網安裝方法:

安裝nvm

nvm,全稱Node Version Manager,是一個用于管理Node.js版本的工具。使用nvm,可以輕松地在同一臺電腦上安裝和切換不同版本的Node.js,從而方便地進行開發和測試。nvm提供了一些命令來管理Node.js版本,如安裝、卸載、使用特定版本的Node.js等以滿足不同項目的需求。

官網地址:https://nvm.uihtm.com/

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.39.0/install.sh | bash

常用命令:

nvm current //顯示當前NVM使用的版本nvm ls //列出本地所有安裝的node版本
nvm ls-remote //列出官網上node的所有版本
nvm version //顯示當前系統默認使用的node版本
nvm use <version> // 切換使用指定的版本nodenvm install stable // 安裝最新穩定版 node
nvm install <version> // 安裝指定版本 
nvm uninstall <version> // 卸載指定版本node,(如果刪除的為當前使用版本,要先執行解綁 nvm deactivate)nvm alias <name> <version> //給不同的版本號添加別名
nvm unalias <name> //刪除已定義的別名
nvm alias default <version> //指定默認版本(設定后需要打開新的終端才生效)

安裝npm

npm,全稱Node Package Manager,是一個Node.js的包管理器。它允許開發者從npm注冊表中安裝和管理軟件包,這些軟件包可以是用于構建工具、庫、框架等。npm最初是作為Node.js的一個子集而創建的,現在已經發展成一個獨立的開源項目,被廣泛應用于JavaScript項目依賴包的管理。

官網地址:https://www.npmjs.com/

nvm install stable # 會默認安裝npm

常用命令 (后面有全部命令介紹):

npm -v #查看版本號
npm config list:# 查看配置信息,比如npm源等#常用包操作 
npm root #查看包的安裝路徑
npm list  #顯示當前應用下的npm包npm i packageName -g #全局安裝
#會下載到node_modules目錄中,并修改package.json(dependencies中會增加)
npm i --save packageName
#會下載到node_modules目錄中,并修改package.json(devDependencies中會增加)
npm install --save-dev packageNamenpm i packageName #安裝在當前應用
npm i packageName@1.x  #安裝指定版本
npm i packageName@2.5.8 --registry=https://registry.npm.taobao.org #指定臨時下載源npm home packageName  # 打開默認瀏覽器跳轉到github中express的主頁
npm view packageName versions  # 查看所有express歷史版本號(很實用)npm uninstall  包名  // 刪除包# 本地安裝根據package.json文件安裝所有依賴包,將安裝包放在 ./node_modules 下
npm install 

環境設置

npm config set <key> <value> [-g|--global]
npm config get <key>
npm config delete <key>
npm config list
npm config editnpm config set proxy=http://xxx #因為公司的防火墻原因,無法完成任何模塊的安裝,這個時候設置代理可以解決
npm config set proxy null #解決Error: connect ECONNREFUSED 127.0.0.1:8087

鏡像設置

一般不需要配置,直接使用cnpm和yarn即可

#檢查當前鏡像
npm config get registry
#官方默認全局鏡像
npm config set registry https://registry.npmjs.org
#1,淘寶鏡像源
npm config set registry https://registry.npmmirror.com
npm config set registry https://registry.npm.taobao.org
#2,騰訊云鏡像源
npm config set registry http://mirrors.cloud.tencent.com/npm/
#3,華為云鏡像源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/# 刪除鏡像配置
npm config delete registry 

緩存路徑

一般不需要設置

#全局安裝路徑
npm config set prefix "D:\Program Files\nodejs\node_global"
#緩存路徑
npm config set cache "D:\Program Files\nodejs\node_cache"# 查看項目中模塊所在的路徑
npm root
# 查看全局安裝的模塊所在路徑
npm root -g  

模塊查詢

express為一模塊包名稱

npm list  # 查看本地已安裝模塊的清單列表
npm ls express  # 查看本地已安裝的express的詳細信息
npm view express dependencies  # 查看某個包對于各種包的依賴關系
npm view express version  # 查看express最新的版本號
npm view express 或 npm info express # 查看最新的express版本的信息
npm view express repository.url  # 查看express包的來源地址npm repo express  # 打開默認瀏覽器跳轉到github中express的頁面
npm docs express  # 打開默認瀏覽器跳轉到github中express的README.MD文件信息
npm home express  # 打開默認瀏覽器跳轉到github中express的主頁

模塊安裝

參數:[-S|--save|-D|--save-dev|-O|--save-optional] [-E|--save-exact] [--dry-run]

# 安裝包加入到dependencies生產依賴,對應package.json文件的dependencies字段
npm i express -S  # 安裝包加入到devDependencies開發依賴,對應package.json 文件的devDependencies字段
npm i express -D # 安裝包加入到optionalDependencies可選依賴,對應package.json 文件的optionalDependencies字段
npm i express -O # 精確安裝指定模塊版本,package.json 文件的 dependencies 字段,以看出版本號中的^消失了
npm i express -E

模塊卸載

npm uninstall express -g  # 卸載全局模塊npm uninstall express  # 卸載模塊,但不刪除package.json中的對應信息
npm uninstall express --save-dev  # 卸載模塊,同時刪除package.json中dependencies下的信息

模塊更新

npm outdated # 檢查應用下是否有過時包
npm update express -g  # 全局更新
npm update express  # 更新最新版本的express
npm update express@2.1.0  # 更新到指定版本號的express
npm update express@latest  # 更新到最后的新版本

模塊構建

npm init  # npm 初始化當前目錄,在項目中引導創建一個package.json文件npm install   # 安裝應用package.json文件中指定的所有依賴npm build    # 編譯應用

模塊運行

npm run customCommand #自定義的shell命令,比如npm run start

npm start [-- <args>]
npm stop [-- <args>]
npm restart [-- <args>]
npm test [-- <args>]

以上幾個命令可在package.json中自定義,如下:

"scripts": {"start": "gulp -ws"
}

模塊發布

這個命令需要當前package.json下執行

npm login
npm adduser yourUserName # 用戶登陸
npm publish  # 執行package.json中相應的配置
npm  -f  unpublish  express@* # 撤消發布

模塊清理

npm cache clean --force # 清除npm本地緩存node_modules目錄下的內容 
npm prune  # 清除項目中沒有被使用的包
npm dedupe # 刪除重復的依賴項

安裝cnpm和tyarn(可選)

這兩個軟件的功能和npm一樣,使用方式也差不多,安裝方式如下

npm install yarn tyarn -g
npm install cnpm -g

tyarn官司地址:https://yarnpkg.com/

cnpm官司地址:https://github.com/cnpm/cnpm

安裝React

官司地址:https://react.dev/
如果用腳手架開發則不需要安裝,另外這兩個核心包不建議全局安裝,因為每個應用的版本有可能都不一樣。

npm install --save-dev react 
npm install --save-dev react-dom

如果采用傳統開發,可從官網下載相應的js文件(只供學習用,生產開發時不要用這種模式)。

安裝Babel

官網地址:https://babeljs.io/repl/

npm install --save-dev babel-cli babel-core babel-polyfill babel-preset-es2015 babel-preset-react

這東西安裝后,如果要單獨使用,可以項目中創建一個名為的.babelrc文件,它用來設置不同環境的轉碼插件:

{plugins:["transform-export-extensions"],presets:["es2015", "react"]
}

單獨使用時可用babel js/source -d js/build指令。

安裝Sass(可選)

官方網址:https://www.sass.hk/

npm install -save-dev babel-loader sass-loader style-loader css-loader react-hot-loader

安裝打包webpack

官方網址:https://webpack.docschina.org/
模塊打包器,作用就是把應用的所有依賴加載到單個文件中,以便在瀏覽器中運行。

npm install --save-dev webpack webpack-cli

安裝后,需要在項目根目錄下配置webpack.config.js配置文件。

安裝Serve

這個是一個運行服務器,可以看成是個nginx

# 安裝
npm install -g serve# 在項目下運行構建項目會生成一個打包后的待部署文件
npm run build# 運行build文件夾下的應用,serve -h
servr -s build # 默認羊肉串3000
serve -s build -l 4000 # 4000端口運行

安裝ESLint

官方網址:https://eslint.org/
React代碼格式檢查工具。

npm -i -g eslint babel-eslint eslint-plugin-react eslint-plugin-babel

單獨使用可運行eslint js/source/app.js指令,安裝后需要在項目根目錄下創建 .eslintrc文件:

  • package.json配置
{"eslintConfig": {"extends": "./node_modules/react-scripts/config/eslint.js"}
}
  • eslintrc文件配置
{"extends": "airbnb", //沿用名為airbnb的規則庫"rules": {"semi": [2, "never"], //semi是個規則名,2表示拋出錯誤,1表示警告,0,關閉此規則,never表示不允許,相返的always表示允許,比如未使用變量的規則名稱為'no-unused-vars'"react/prefer-stateless-function": 0,}
}

使用create-react-app腳手架創建React應用

官方文檔 :https://create-react-app.dev/
這個插件是官方用于創建工程使用的,使用方法如下:

  • 安裝
npm install -g create-react-app
  • 初始化應用
# 會在當前目錄中創建一個名為hello-world的文件夾并下載相當應該
cnpm init react-app hellp-world

在這里插入圖片描述

  • 運行
# 運行
npm run start

在這里插入圖片描述

其它腳手架

另外官網也介紹了幾個生產級的React框架

  • nextjs:全棧的 React 框架 npx create-next-app@latest
  • remix:具有嵌套路由的全棧式 React 框架npx create-remix
  • gatsbyjs:快速的支持 CMS 的網站的 React 框架。其豐富的插件生態系統和 GraphQL 數據層npx create-gatsby
  • expo:是一個 React 框架,可以讓你創建具有真正原生 UI 的應用,包括 Android、iOS,以及 Web 應用npx create-expo-app

常用的三方庫

npm i nanoid # 生成 UUID
npm i prop-types # 限定標簽類型和屬性,用法同之前
npm i axios #ajax

axios

配置

const proxy = require('http-proxy-middleware')module.exports = function (app){app.use(proxy('/api1',{ // 遇見 /api1 才會觸發代理target:'http://localhost:5000', // 請求轉發給的服務器地址changeOrigin: true, // 控制服務器收到的請求頭中 Host 字段的值(request headers)不加的話,就是 3000,服務端還是可能會限制請求pathRewrite:{ '^/api1': ''} // 重寫請求路徑:/api1/students -> students 才能訪問到數據(必須要寫)}),proxy('/api2',{target:'http://localhost:5001',changeOrigin: true,pathRewrite:{ '^/api2': ''}}))
}

調用

// 調用
getStudentData = ()=>{axios.get('http://localhost:3000/api1/students').then(res=>{ // 觸發 /api1 代理console.log(res)}).catch(err=>{console.log(err)})
}
getCarData = ()=>{axios.get('http://localhost:3000/api2/cars').then(res=>{ // 觸發 /api2 代理console.log(res)}).catch(err=>{console.log(err)})
}

webpack打包

  • 創建一個名為webpack.config.js的配置文件:
const path = require('path');module.exports = {entry: './src/index.js', // 項目的入口文件output: {filename: 'bundle.js', // 打包后的文件名path: path.resolve(__dirname, 'dist'), // 打包文件放置的目錄}
};

在package.json中添加一個腳本來運行Webpack:

"scripts": {"build": "webpack"
} 
  • 運行npm run build后,Webpack會在dist/目錄生成bundle.js文件。

package.json文件

詳細可參考:https://docs.npmjs.com/cli/v10/configuring-npm/package-json網站

package.json 文件是 Node.js 項目和許多前端 JavaScript 項目中的一個重要文件,它包含了項目的元數據和依賴信息。這個文件通常由幾個部分組成,包括項目的名稱、版本、描述、入口文件、依賴項、開發依賴項、腳本等。

{"name": "react",//發布到NPM平臺上的唯一標識,如果沒有正確設置這兩個字段,包就不能發布和被下載"version": "1.0.0",//發布到NPM平臺上的唯一標識,如果沒有正確設置這兩個字段,包就不能發布和被下載"description": "Command line instructions",//包的描述信息,將會在npm search的返回結果中顯示,以幫助用戶選擇合適的包"private":ture,//設為true這個包將不會發布到NPM平臺下"keywords": [//包的關鍵詞信息,是一個字符串數組,同上也將顯示在npm search的結果中"react","es6","react with es6"],"homepage": "https://github.com/rainnaZR/es6-react","bugs": {"url": "https://github.com/rainnaZR/es6-react","email": "111@163.com"},"license": "ISC","author": "ZRainna","main": "src/pages/index.js", //包的入口文件"directories": {//CommonJS包所要求的目錄結構信息,展示項目的目錄結構信息(較少用)"tests": "tests","lib":"lib","docs":"docs"},"repository": {//包的倉庫地址"type": "git","url": "git+https://github.com/rainnaZR/es6-react.git"},//通過設置這個可以使NPM調用一些命令腳本,封裝一些功能"scripts": {"start": "babel-node src/pages/index.js","build": "webpack --config config/webpack.config.js","watch": "webpack-dev-server --config config/webpack.config.js --hot --inline --progress"},"config": {//添加一些設置,可以供scripts讀取用,同時這里的值也會被添加到系統的環境變量中,npm start的時候會讀取到npm_package_config_port環境變量"port": "8080"},"babel": {  //JSX翻譯器配置"presets": ["es2015","react"]},/*兼容模塊新發布的補丁版本:~1.1.0、1.1.x、1.1兼容模塊新發布的小版本、補丁版本:^1.1.0、1.x、1兼容模塊新發布的大版本、小版本、補丁版本:*、x*/"devDependencies": { //開發環境,一般測試等一些包全在這里"webpack": "^1.13.2","webpack-dev-server": "^1.16.1"},"dependencies": { //生產環境,會隨應用一起打包"babel-loader": "^6.2.5","babel-preset-es2015": "^6.14.0","babel-preset-react": "^6.11.1","react": "^15.3.2","react-dom": "^15.3.2","react-redux": "^4.4.5","react-router": "^2.8.1","redux": "^3.6.0"}
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/14714.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/14714.shtml
英文地址,請注明出處:http://en.pswp.cn/web/14714.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

一款顏值頗高的虛擬列表!差點就被埋沒了,終于還是被我挖出來了

大家好&#xff0c;我是曉衡&#xff01; 今天&#xff0c;推薦一款頗有顏值的虛擬列表組件&#xff0c;不然真的被埋沒就可惜了&#xff01; 我們先來看下效果&#xff1a; 感覺怎么樣&#xff1f;還不錯吧&#xff01; 為什么說這個資源差點被埋沒呢&#xff1f;因為個朋友找…

用數據,簡單點!奇點云2024 StartDT Day數智科技大會,直播見

在充滿挑戰的2024&#xff0c;企業如何以最小化的資源投入和試錯成本&#xff0c;挖掘新的增長機會&#xff0c;實現確定性發展&#xff1f; “簡單點”是當前商業環境的應對策略&#xff0c;也是奇點云2024 StartDT Day的核心理念。 5月28日&#xff0c;由奇點云主辦的2024 S…

Linux —— 信號量

Linux —— 信號量 什么是信號量P操作&#xff08;Wait操作&#xff09;V操作&#xff08;Signal操作&#xff09;信號量的類型 一些接口POSIX 信號量接口&#xff1a;其他相關命令&#xff1a; 基于循環隊列的生產者和消費者模型同步關系 多生產多消費 我們今天接著來學習信號…

【譯】組復制和 Percona XtraDB 集群: 常見操作概述

原文地址&#xff1a;Group Replication and Percona XtraDB Cluster: Overview of Common Operations 在這篇博文中&#xff0c;我將概述使用 MySQL Group Replication 8.0.19&#xff08;又稱 GR&#xff09;和 Percona XtraDB Cluster 8 (PXC)&#xff08;基于 Galera&…

Jetbrains插件AI Assistant,終于用上了

ai assistant激活成功后&#xff0c;如圖 ai assistant獲取&#xff1a;https://web.52shizhan.cn/activity/ai-assistant 主要功能如下

Spring Boot 配置使用 PEM 格式SSL/TLS證書和私鑰

傳統的為 Spring Boot 配置SSL/TLS證書一般都會把證書打包成 JKS(Java KeyStore) 或 PKCS12 (Public Key Cryptographic Standards) 格式&#xff0c;然后為Spring Boot 增加以下類似配置&#xff1a; # The format used for the keystore. It could be set to JKS in case it…

SpringBoot(六)之內嵌容器

SpringBoot&#xff08;六&#xff09;之內嵌容器 文章目錄 SpringBoot&#xff08;六&#xff09;之內嵌容器內嵌容器的特點如何替換默認容器1.pom形式2.主動配置 如何通過配置切換serlvet容器 Spring Boot 提供了一種便捷的方式來創建獨立運行的 Spring 應用程序&#xff0c;…

計算機畢業設計hadoop+spark微博輿情大數據分析 微博爬蟲可視化 微博數據分析 微博采集分析平臺 機器學習(大屏+LSTM情感分析+爬蟲)

電商數據建模 一、分析背景與目的 1.1 背景介紹 電商平臺數據分析是最為典型的一個數據分析賽道&#xff0c;且電商數據分析有著比較成熟的數據分析模型&#xff0c;比如&#xff1a;人貨場模型。此文中我將通過分析國內最大的電商平臺——淘寶的用戶行為&#xff0c;來鞏固數…

算法打卡 Day13(棧與隊列)-滑動窗口最大值 + 前 K 個高頻元素 + 總結

文章目錄 Leetcode 239-滑動窗口最大值題目描述解題思路 Leetcode 347-前 K 個高頻元素題目描述解題思路 棧與隊列總結 Leetcode 239-滑動窗口最大值 題目描述 https://leetcode.cn/problems/sliding-window-maximum/description/ 解題思路 在本題中我們使用自定義的單調隊列…

C語言指針指針和數組筆試題(必看)

前言&#xff1a; 前面介紹了指針的大體內容&#xff0c;如果接下來能夠把這些代碼的含義搞得清清楚楚&#xff0c;那么你就是代碼king&#xff01; 一維數組&#xff1a; int a[] {1,2,3,4}; printf("%d\n",sizeof(a)); printf("%d\n",sizeof(a0)); pr…

element-ui輸入框和多行文字輸入框字體不一樣解決

element-ui的type"textarea"的字體樣式與其他樣式不同 <el-input type"textarea"></el-input> <el-input ></el-input>設置&#xff1a; .el-textarea__inner::placeholder {font-family: "Helvetica Neue", Helvetic…

linux排查思路

1.賬號安全 who 查看當前登錄用戶&#xff08;tty本地登錄pts遠程登錄&#xff09; w 查看系統信息&#xff0c;想知道某一時刻用戶的行為 uptime 查看登錄多久、多少用戶&#xff0c;負載 1.查看用戶信息文件/etc/passwd root:x:0:0:root:/root:/bin:/b…

刪除MySQL中所有表的外鍵

方法一&#xff1a; 原理 查詢schema中所有外鍵名稱然后拼接生成刪除語句 第一步&#xff1a; SELECT CONCAT(ALTER TABLE ,TABLE_SCHEMA,.,TABLE_NAME, DROP FOREIGN KEY ,CONSTRAINT_NAME, ;) FROM information_schema.TABLE_CONSTRAINTS c WHERE c.TABLE_SCHEMA數據庫名…

Vue 跨域代理設置

Vue CLI允許你通過項目根目錄下的vue.config.js文件來定制devServer的配置。以下是一些常見的配置示例&#xff1a; module.exports {devServer: {// 跨域代理配置&#xff0c;解決開發環境API跨域問題proxy: {//匹配以api路徑請求的URL&#xff0c;轉發請求的服務器地址/api…

課時135:awk實踐_邏輯控制_綜合實踐

1.3.8 綜合實踐 學習目標 這一節&#xff0c;我們從 網絡實踐、文件實踐、小結 三個方面來學習 網絡實踐 簡介 所謂的網絡實踐&#xff0c;主要是借助于awk的數組功能&#xff0c;進行站點的信息統計操作。準備網絡環境 安裝軟件 yum install nignx -y重啟nginx [rootloca…

Linux修煉之路之自動化構建工具,進度條,gdb調試器

目錄 一&#xff1a;自動化構建工具make/makefile 生成內容&#xff1a; 清理內容&#xff1a; 對于多過程的&#xff1a; 對于多次make&#xff1a; 特殊符號&#xff1a; 二&#xff1a;小程序之進度條 三&#xff1a;git的簡單介紹 四&#xff1a;Linux調試器gdb 接…

fpga 提高有什么進階書推薦?

到FPGA中后期的時候就要開始接觸&#xff0c;如&#xff1a;高速接口、光纖數字信號處理等項目實踐了&#xff0c;那么我們可以讀一些書進行提升&#xff0c;大家可以收藏下。 高速接口項目《嵌入式高速串行總線技術:基于FPGA實現與應用》作者&#xff1a;張鋒 FPGA提升書籍推…

Go團隊:Go是什么

2024年的Google I/O大會[1]如期而至。 這屆大會的核心主旨毫無疑問是堅定不移的以AI為中心&#xff1a;Google先是發布了上下文長度將達到驚人的200萬token的Gemini 1.5 Pro[2]&#xff0c;然后面對OpenAI GPT-4o的挑釁&#xff0c;谷歌在大會上直接甩出大殺器Project Astra[3]…

第七節 ConfigurationClassParser 源碼分析

tips&#xff1a; ConfigurationClassParser 是 Springframework 中的重要類。 本章主要是源碼理解&#xff0c;有難度和深度&#xff0c;也枯燥乏味&#xff0c;可以根據實際情況選擇閱讀。 位置&#xff1a;org.springframework.context.annotation.ConfigurationClassPars…