5

React专题(1)-环境配置

 1 year ago
source link: https://blog.51cto.com/arch/5756335
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

React专题(1)-环境配置

推荐 原创

生而为人我很遗憾 2022-10-14 13:15:08 博主文章分类:js ©著作权

文章标签 json node.js 字段 react 文章分类 Java 编程语言 阅读数291

此节把开发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有一个版本对应关系。详细可查看​ ​node.js版本 ​​ 笔者使用的是mac os 系统,所以后续所有设置都以mac下的操作为主。

一、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​

  • 收藏
  • 评论
  • 分享
  • 举报

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK