這篇文章主要講解了“React環(huán)境如何配置”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“React環(huán)境如何配置”吧！

創(chuàng)新互聯(lián)致力于互聯(lián)網品牌建設與網絡營銷，包括網站設計制作、網站建設、SEO優(yōu)化、網絡推廣、整站優(yōu)化營銷策劃推廣、電子商務、移動互聯(lián)網營銷等。創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網應用定制及解決方案，創(chuàng)新互聯(lián)核心團隊十多年專注互聯(lián)網開發(fā)，積累了豐富的網站經驗，為廣大企業(yè)客戶提供一站式企業(yè)網站建設服務，在網站建設行業(yè)內樹立了良好口碑。

在react開發(fā)中主要依賴的是node，主要需要配置以下內容：

• nvm：需要單獨安裝，主要是對項目使用的node.js解釋器進行管理，類比java相當于JDK版本管理器

• npm：隨著 Node.js 一同安裝的包管理器（主要用來管理包），類比java相當于maven

• node.js：NodeJS 項目開發(fā)需要使用的解釋器，類比java相當于jdk

• babel：編譯工具

• sass：css預處理器

• webpack：打包工具

以上這些命令中npm和nvm會使用的比較頻繁。同時node.js和npm有一個版本對應關系。

一、nvm安裝

Node.js 不自帶版本管理器，因此需要一個其他的一個程序來管理，這個程序是需要安裝的，這就是為什么 nvm 需要單獨安裝的原因了。

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

常用的命令如下：

nvm current //顯示當前使用的版本
nvm ls //列出本地所有安裝的版本
nvm ls-remote //列出官網上node的所有版本

nvm install stable // 安裝最新穩(wěn)定版 node（當前最新穩(wěn)定版11.6.0）
nvm install <version> // 安裝指定版本 (install v10.15.0或install 10.15.0)
nvm uninstall <version> // 卸載指定版本node,（如果刪除的為當前使用版本，要解綁，則執(zhí)行 nvm deactivate）

nvm use <version> // 切換使用指定的版本node

nvm alias <name> <version> //給不同的版本號添加別名
nvm unalias <name> //刪除已定義的別名
nvm alias default <version> //指定默認版本（設定后需要打開新的終端才生效）

二、npm安裝

通過以上nvm命令就已經安裝了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 //在項目中引導創(chuàng)建一個package.json文件
npm  publish
npm  -f  unpublish  dollarphpajax@* //撤消發(fā)布

//安裝包
npm ls 
npm ls -g
npm root //查看包的安裝路徑
npm outdated //檢查模塊是否過時
npm view gulp dependencies //查看模塊的依賴關系

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命令詳解以及相關包安裝

common options: [-S|--save|-D|--save-dev|-O|--save-optional] [-E|--save-exact] [--dry-run]
//--save 安裝包信息將加入到dependencies（生產階段的依賴）,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文件，它用來設置不同環(huá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í)行默認的規(guī)則檢查項
  
  "env": {
    "browser": true,//去掉未使用變量的檢查
    "jest": true
  },
  "rules": {//定義詳細規(guī)則
      "semi": [2, "never"]//永遠禁用分號，0禁用；1警告；2錯誤，第二個參數(shù)還有always
  }
},

安裝EditorConfig

編輯器規(guī)范，可在.editorconfig中配置，相應的需要下載對應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í)行默認的規(guī)則檢查項
  
  "env": {
    "browser": true,//去掉未使用變量的檢查
    "jest": true
  },
  "rules": {//定義詳細規(guī)則
      "semi": [2, "never"]//永遠禁用分號，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  //因為公司的防火墻原因，無法完成任何模塊的安裝，這個時候設置代理可以解決
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平臺上的唯一標識，如果沒有正確設置這兩個字段，包就不能發(fā)布和被下載
  "version": "1.0.0",//發(fā)布到NPM平臺上的唯一標識，如果沒有正確設置這兩個字段，包就不能發(fā)布和被下載
  "description": "Command line instructions",//包的描述信息，將會在npm search的返回結果中顯示，以幫助用戶選擇合適的包
  "private":ture,//設為true這個包將不會發(fā)布到NPM平臺下
  "keywords": [//包的關鍵詞信息，是一個字符串數(shù)組，同上也將顯示在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讀取用，同時這里的值也會被添加到系統(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)境如何配置”的內容了，經過本文的學習后，相信大家對React環(huán)境如何配置這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

分享名稱：React環(huán)境如何配置
本文地址：http://jinyejixie.com/article10/pshggo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站排名、動態(tài)網站、微信小程序、云服務器、網站營銷、網站策劃

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)