這篇文章主要講解了“React環(huán)境如何配置”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“React環(huán)境如何配置”吧！
創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，包括網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營銷策劃推廣、電子商務(wù)、移動互聯(lián)網(wǎng)營銷等。創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，創(chuàng)新互聯(lián)核心團(tuán)隊(duì)十多年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。
在react開發(fā)中主要依賴的是node，主要需要配置以下內(nèi)容：
nvm：需要單獨(dú)安裝，主要是對項(xiàng)目使用的node.js解釋器進(jìn)行管理，類比java相當(dāng)于JDK版本管理器
npm：隨著 Node.js 一同安裝的包管理器（主要用來管理包），類比java相當(dāng)于maven
node.js：NodeJS 項(xiàng)目開發(fā)需要使用的解釋器，類比java相當(dāng)于jdk
babel：編譯工具
sass：css預(yù)處理器
webpack：打包工具
以上這些命令中npm和nvm會使用的比較頻繁。同時node.js和npm有一個版本對應(yīng)關(guān)系。
Node.js 不自帶版本管理器，因此需要一個其他的一個程序來管理，這個程序是需要安裝的，這就是為什么 nvm 需要單獨(dú)安裝的原因了。
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// 安裝指定版本 (install v10.15.0或install 10.15.0) nvm uninstall // 卸載指定版本node,（如果刪除的為當(dāng)前使用版本，要解綁，則執(zhí)行 nvm deactivate） nvm use // 切換使用指定的版本node nvm alias //給不同的版本號添加別名 nvm unalias //刪除已定義的別名 nvm alias default //指定默認(rèn)版本（設(shè)定后需要打開新的終端才生效）
通過以上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 //在項(xiàng)目中引導(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中定義的腳本命令
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 字段，以看出版本號中的^消失了
重慶分公司
重慶分公司
npm install --save-dev babel-cli babel-core babel-polyfill babel-preset-es2015 babel-preset-react
安裝后，在項(xiàng)目的根目錄下配置.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/buildnpm install -save-dev babel-loader sass-loader style-loader css-loader react-hot-loader
npm install -save-dev webpack
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ī)則檢查項(xiàng)
"env": {
"browser": true,//去掉未使用變量的檢查
"jest": true
},
"rules": {//定義詳細(xì)規(guī)則
"semi": [2, "never"]//永遠(yuǎn)禁用分號，0禁用；1警告；2錯誤，第二個參數(shù)還有always
}
},編輯器規(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ī)則檢查項(xiàng)
"env": {
"browser": true,//去掉未使用變量的檢查
"jest": true
},
"rules": {//定義詳細(xì)規(guī)則
"semi": [2, "never"]//永遠(yuǎn)禁用分號，0禁用；1警告；2錯誤，第二個參數(shù)還有always
}
},npm config set[-g|--global] npm config get npm config delete npm config list npm config edit npm config set proxy=http://xxx //因?yàn)楣镜姆阑饓υ颍瑹o法完成任何模塊的安裝，這個時候設(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 //臨時配置，如安裝淘寶鏡像
{
"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)信息，展示項(xiàng)目的目錄結(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ā)布的補(bǔ)丁版本：~1.1.0、1.1.x、1.1
兼容模塊新發(fā)布的小版本、補(bǔ)丁版本：^1.1.0、1.x、1
兼容模塊新發(fā)布的大版本、小版本、補(bǔ)丁版本：*、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"
}
}Material-UI
感謝各位的閱讀，以上就是“React環(huán)境如何配置”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對React環(huán)境如何配置這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！
