React环境如何配置

这篇文章主要讲解了“React环境如何配置”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“React环境如何配置”吧！

创新互联致力于互联网品牌建设与网络营销，包括网站设计制作、网站建设、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。创新互联为不同类型的客户提供良好的互联网应用定制及解决方案，创新互联核心团队十多年专注互联网开发，积累了丰富的网站经验，为广大企业客户提供一站式企业网站建设服务，在网站建设行业内树立了良好口碑。

在react开发中主要依赖的是node，主要需要配置以下内容：

• nvm：需要单独安装，主要是对项目使用的node.js解释器进行管理，类比java相当于JDK版本管理器

• npm：随着 Node.js 一同安装的包管理器（主要用来管理包），类比java相当于maven

• node.js：NodeJS 项目开发需要使用的解释器，类比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 // 安装最新稳定版 node（当前最新稳定版11.6.0）
nvm install  // 安装指定版本 (install v10.15.0或install 10.15.0)
nvm uninstall  // 卸载指定版本node,（如果删除的为当前使用版本，要解绑，则执行 nvm deactivate）

nvm use  // 切换使用指定的版本node

nvm alias   //给不同的版本号添加别名
nvm unalias  //删除已定义的别名
nvm alias default  //指定默认版本（设定后需要打开新的终端才生效）

二、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 

//发布包
npm  login
npm adduser //用户登陆
npm  init //在项目中引导创建一个package.json文件
npm  publish
npm  -f  unpublish  dollarphpajax@* //撤消发布

//安装包
npm ls 
npm ls -g
npm root //查看包的安装路径
npm outdated //检查模块是否过时
npm view gulp dependencies //查看模块的依赖关系

npm  -g install  包名 //全局安装
npm  install  // 本地安装根据package.json文件安装，将安装包放在 ./node_modules 下
npm  install  包名@1.x  // 安装指定版本

//删除包
npm  uninstall  包名 

//更新包
npm  -g  update  包名 // 全局更新
npm  update  包名 //本地更新

//执行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（开发阶段的依赖），所以开发阶段一般使用它,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文件，它用来设置不同环境的转码插件，默认作用域是所有环境。配置如下：
{
    plugins:["transform-export-extensions"],
    presets:["es2015", "react"]
}

"babel": {
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ]
},

执行时输入：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代码规范检查工具

安装：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", //执行默认的规则检查项
  
  "env": {
    "browser": true,//去掉未使用变量的检查
    "jest": true
  },
  "rules": {//定义详细规则
      "semi": [2, "never"]//永远禁用分号，0禁用；1警告；2错误，第二个参数还有always
  }
},

安装EditorConfig

编辑器规范，可在.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", //执行默认的规则检查项
  
  "env": {
    "browser": true,//去掉未使用变量的检查
    "jest": true
  },
  "rules": {//定义详细规则
      "semi": [2, "never"]//永远禁用分号，0禁用；1警告；2错误，第二个参数还有always
  }
},

npm config

npm config set   [-g|--global]
npm config get 
npm config delete 
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",//发布到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": {
    "presets": [
      "es2015-node5"
    ]
  },
  /*
  兼容模块新发布的补丁版本：~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"
  }
}

四、常用的UI组件框架

Material-UI

感谢各位的阅读，以上就是“React环境如何配置”的内容了，经过本文的学习后，相信大家对React环境如何配置这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！