共計 5157 個字符，預(yù)計需要花費 13 分鐘才能閱讀完成。
這篇文章主要講解了“React 環(huán)境如何配置”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著丸趣 TV 小編的思路慢慢深入，一起來研究和學(xué)習(xí)“React 環(huán)境如何配置”吧！
在 react 開發(fā)中主要依賴的是 node，主要需要配置以下內(nèi)容：
nvm：需要單獨安裝，主要是對項目使用的 node.js 解釋器進(jìn)行管理，類比 java 相當(dāng)于 JDK 版本管理器
npm：隨著 Node.js 一同安裝的包管理器（主要用來管理包），類比 java 相當(dāng)于 maven
node.js：NodeJS 項目開發(fā)需要使用的解釋器，類比 java 相當(dāng)于 jdk
babel：編譯工具
sass：css 預(yù)處理器
webpack：打包工具
以上這些命令中 npm 和 nvm 會使用的比較頻繁。同時 node.js 和 npm 有一個版本對應(yīng)關(guān)系。
一、nvm 安裝
Node.js 不自帶版本管理器，因此需要一個其他的一個程序來管理，這個程序是需要安裝的，這就是為什么 nvm 需要單獨安裝的原因了。
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.39.0/install.sh | bash常用的命令如下：
nvm current // 顯示當(dāng)前使用的版本
nvm ls // 列出本地所有安裝的版本
nvm ls-remote // 列出官網(wǎng)上 node 的所有版本
nvm install stable // 安裝最新穩(wěn)定版 node（當(dāng)前最新穩(wěn)定版 11.6.0）nvm install version // 安裝指定版本 (install v10.15.0 或 install 10.15.0)
nvm uninstall version // 卸載指定版本 node,（如果刪除的為當(dāng)前使用版本，要解綁，則執(zhí)行 nvm deactivate）nvm use version // 切換使用指定的版本 node
nvm alias name version // 給不同的版本號添加別名
nvm unalias name // 刪除已定義的別名
nvm alias default version // 指定默認(rèn)版本（設(shè)定后需要打開新的終端才生效）二、npm 安裝
通過以上 nvm 命令就已經(jīng)安裝了 npm，所以這里主要涉及到 npm 的使用。
npm -v // 查看版本號
npm config list：查看配置信息，比如 npm 源等
npm config set registry http://registry.npm.taobao.org // 添加 mirro
npm config delete registry
npm cache clean --force// 清除 npm 本地緩存，node_modules
// 發(fā)布包
npm login
npm adduser // 用戶登陸
npm init // 在項目中引導(dǎo)創(chuàng)建一個 package.json 文件
npm publish
npm -f unpublish dollarphpajax@* // 撤消發(fā)布
// 安裝包
npm ls
npm ls -g
npm root // 查看包的安裝路徑
npm outdated // 檢查模塊是否過時
npm view gulp dependencies // 查看模塊的依賴關(guān)系
npm -g install 包名 // 全局安裝
npm install // 本地安裝根據(jù) package.json 文件安裝，將安裝包放在 ./node_modules 下
npm install 包名 @1.x // 安裝指定版本
// 刪除包
npm uninstall 包名
// 更新包
npm -g update 包名 // 全局更新
npm update 包名 // 本地更新
// 執(zhí)行 shell 命令 package.json
npm run // 在 package.json 的 scripts 中定義的腳本命令 npm install 命令詳解以及相關(guān)包安裝
common options: [-S|--save|-D|--save-dev|-O|--save-optional] [-E|--save-exact] [--dry-run]
//--save 安裝包信息將加入到 dependencies（生產(chǎn)階段的依賴）,package.json 文件的 dependencies 字段
//-D, --save-dev 安裝包信息將加入到 devDependencies（開發(fā)階段的依賴），所以開發(fā)階段一般使用它,package.json 文件的 devDependencies 字段
//-O, --save-optional 安裝包信息將加入到 optionalDependencies（可選階段的依賴）,package.json 文件的 optionalDependencies 字段
//-E, --save-exact 精確安裝指定模塊版本,package.json 文件的 dependencies 字段，以看出版本號中的 ^ 消失了 安裝 babel
npm install --save-dev babel-cli babel-core babel-polyfill babel-preset-es2015 babel-preset-react
安裝后，在項目的根目錄下配置.babelrc 文件，它用來設(shè)置不同環(huán)境的轉(zhuǎn)碼插件，默認(rèn)作用域是所有環(huán)境。配置如下： plugins:[transform-export-extensions],
presets:[es2015 , react]
}babel : {
presets : [
es2015 ,
react ,
stage-0
]
執(zhí)行時輸入：babel js/source -d js/build安裝 Sass
npm install -save-dev babel-loader sass-loader style-loader css-loader react-hot-loader安裝 webpack
npm install -save-dev webpack安裝 ESLint
js 和 jsx 代碼規(guī)范檢查工具
安裝：npm -i -g eslint babel-eslint eslint-plugin-react eslint-plugin-babel
檢查：eslint js/source/app.js
配置文件 .eslintrc
eslintConfig : {
parser : babel-eslint ,
plugins : [babel , react],
extends : eslint:recommended , // 執(zhí)行默認(rèn)的規(guī)則檢查項
env : {
browser : true,// 去掉未使用變量的檢查
jest : true
},
rules : {// 定義詳細(xì)規(guī)則
semi : [2, never]// 永遠(yuǎn)禁用分號，0 禁用；1 警告；2 錯誤，第二個參數(shù)還有 always
}
},安裝 EditorConfig
編輯器規(guī)范，可在.editorconfig 中配置，相應(yīng)的需要下載對應(yīng) IDE 的編輯器。
安裝：npm -i -g eslint babel-eslint eslint-plugin-react eslint-plugin-babel
檢查：eslint js/source/app.js
配置文件 .eslintrc
eslintConfig : {
parser : babel-eslint ,
plugins : [babel , react],
extends : eslint:recommended , // 執(zhí)行默認(rèn)的規(guī)則檢查項
env : {
browser : true,// 去掉未使用變量的檢查
jest : true
},
rules : {// 定義詳細(xì)規(guī)則
semi : [2, never]// 永遠(yuǎn)禁用分號，0 禁用；1 警告；2 錯誤，第二個參數(shù)還有 always
}
},npm config
npm config set key value [-g|--global]
npm config get key
npm config delete key
npm config list
npm config edit
npm config set proxy=http://xxx // 因為公司的防火墻原因，無法完成任何模塊的安裝，這個時候設(shè)置代理可以解決
npm config set proxy null // 解決 Error: connect ECONNREFUSED 127.0.0.1:8087
npm config set registry= http://r.cnpmjs.org
npm install -g cnpm --registry=https://registry.npm.taobao.org // 臨時配置，如安裝淘寶鏡像 三、package.json
{
name : react ,// 發(fā)布到 NPM 平臺上的唯一標(biāo)識，如果沒有正確設(shè)置這兩個字段，包就不能發(fā)布和被下載
version : 1.0.0 ,// 發(fā)布到 NPM 平臺上的唯一標(biāo)識，如果沒有正確設(shè)置這兩個字段，包就不能發(fā)布和被下載
description : Command line instructions ,// 包的描述信息，將會在 npm search 的返回結(jié)果中顯示，以幫助用戶選擇合適的包
private :ture,// 設(shè)為 true 這個包將不會發(fā)布到 NPM 平臺下
keywords : [// 包的關(guān)鍵詞信息，是一個字符串?dāng)?shù)組，同上也將顯示在 npm search 的結(jié)果中
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 包所要求的目錄結(jié)構(gòu)信息，展示項目的目錄結(jié)構(gòu)信息 ( 較少用)
tests : tests ,
lib : lib ,
docs : docs
},
repository : {// 包的倉庫地址
type : git ,
url : git+https://github.com/rainnaZR/es6-react.git
},
// 通過設(shè)置這個可以使 NPM 調(diào)用一些命令腳本，封裝一些功能
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 : {// 添加一些設(shè)置，可以供 scripts 讀取用，同時這里的值也會被添加到系統(tǒng)的環(huán)境變量中,npm start 的時候會讀取到 npm_package_config_port 環(huán)境變量
port : 8080
},
babel : {
presets : [
es2015-node5
]
},
/*
兼容模塊新發(fā)布的補丁版本：~1.1.0、1.1.x、1.1
兼容模塊新發(fā)布的小版本、補丁版本：^1.1.0、1.x、1
兼容模塊新發(fā)布的大版本、小版本、補丁版本：*、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
}
}四、常用的 UI 組件框架
Material-UI
感謝各位的閱讀，以上就是“React 環(huán)境如何配置”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對 React 環(huán)境如何配置這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是丸趣 TV，丸趣 TV 小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
正文完
