React環境
前端隨著規范化,可以說規范和環境插件配置滿天飛,筆者最早接觸的是jquery,那個開發非常簡單,只要引入jquery就可以了,當時還寫了一套UI框架,至今在做小型項目中還在使用,show一張效果圖吧,當作留念了:
后來出現了Vue、Angular等,那語法格式實在費解,果斷放棄了前端,后來又幾經分分合合,至今算是集中在了React上了,但當初需環境時也是費了好大勁,為了剛接觸的同學好理解,特意整理一下開發中關于React的環境配置,大體環境關系如下:
- nvm:需要最先安裝,用于對node.js解釋器進行管理,相當于node.js的版本管理器,因為React開發需要node.js的支持;
- node.js:安裝好nvm后就需要安裝node.js了,它可以理解為java的jdk;在React開發中可以理解為React的運行環境;
- npm:React開發需要依賴各種不同的三方庫,npm就是用于下載不同的三方庫用,可以理解為java開發中的maven;
- cnpm:功能同npm,因為npm的庫包服務器在國外,下載速度有時會很慢,cnpm連接的是國內服務器;
- yarn/tyarn:功能同npm,也是由于npm庫在國外的原因,開發的另一個版本管理工具;
- 腳手架:這個不用解釋了,網上N多,筆者主要用三個:學習使用(create-react-app),工作使用(ant-design,MUI),前者是官方給的,后者是三方開發的;
- webpack:React應用打包工具;
- babel:JSX語法轉譯工具,在React開發中會用到JSX語法(Facebook開發的一種被二次封裝的js語法,主要是為了簡化代碼),這種語法不能被瀏覽器直接識別,因此在運行前需要一個類似編譯的過程;
- 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"}
}