共计 5157 个字符，预计需要花费 13 分钟才能阅读完成。
这篇文章主要讲解了“React 环境如何配置”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着丸趣 TV 小编的思路慢慢深入，一起来研究和学习“React 环境如何配置”吧！
在 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 version // 安装指定版本 (install v10.15.0 或 install 10.15.0)
nvm uninstall version // 卸载指定版本 node,（如果删除的为当前使用版本，要解绑，则执行 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
// 发布包
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 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 ,// 发布到 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 : [email protected]
},
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 环境如何配置这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是丸趣 TV，丸趣 TV 小编将为大家推送更多相关知识点的文章，欢迎关注！
正文完
