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环境如何配置这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
网站栏目：React环境如何配置
标题URL：http://scyanting.com/article/pshggo.html
