Skip to main content

React（Mac）

软件版本说明​

项目工程开发及运行所需软件：

项目版本说明
Git>=2.22.0软件配置管理工具
Node.js>=14Node.js 运行时环境
Create React App>=4.0React 构建工具
Visual Studio Code>=1.50轻量级代码编辑器
React Devtools4.4.0浏览器调试工具

配置网络代理​

如果安装包过慢，可以使用网络代理工具。

复制终端代理命令，使终端走网络代理

export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7890

安装 Git​

$ brew install git

Mac OS X 出厂自带 Git，该操作将对 Git 版本升级。

安装 yarn​

$ brew install yarn #安装
$ brew upgrade yarn #更新

安装 Node.js​

安装 nvm​

Node Version Manager 简称 nvm，是node的包管理工具。

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

将以下内容加入到正确的 profile 文件（~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc)

$ export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

重启终端窗口或者执行以下命令让环境变量生效

bash: source ~/.bashrc
zsh: source ~/.zshrc
ksh: . ~/.profile

安装 Node.js​

$ nvm install 14
$ node -v #确认使用的版本

安装 Create React App​

yarn global add create-react-app

安装 VSCode​

下载安装

安装扩展插件​

插件名称插件说明
Reactjs code snippets快速生成代码插件

安装 github desktop​

https://desktop.github.com/

克隆工程​

仓库地址：https://github.com/codedance-dl/dxsuite-web-admin-react

安装项目​

进入工程的根目录，执行安装命令

$ yarn install

多环境变量配置​

本地开发环境​

环境配置文件路径 env

// 不使用 NODE_ENV 模式
REACT_APP_API_URL="https://api-dev.dxsuite.cn" // api 地址

REACT_APP_DEFAULT_ORGID="60a4dea10d2991747abe1019" // 固定的机构id sass软件不用填写

REACT_APP_wsURL = "api.dxsuite.cn"

测试环境​

环境配置文件路径 env.development

NODE_ENV='production' // 使用 production 模式，压缩代码进行发布

REACT_APP_API_URL="https://api-dev.dxsuite.cn" // api 地址

REACT_APP_DEFAULT_ORGID="60a4dea10d2991747abe1019" // 固定的机构id sass软件不用填写

REACT_APP_wsURL = "api.dxsuite.cn"

生产环境​

环境配置文件路径 env.production

NODE_ENV='production' // 使用 production 模式，压缩代码进行发布

REACT_APP_API_URL="https://api.dxsuite.cn" // 生产环境 api 地址

REACT_APP_DEFAULT_TENANT_ID="60a4dea10d2991747abe1019" // 固定的机构id sass软件不用填写

REACT_APP_wsURL = "api.dxsuite.cn"

package.json 配置​

通过覆写--mode修改使用的配置文件

{
  "scripts": {
    "start": "craco start",
    "build": "dotenv -e .env.production craco build",
    "build:dev": "dotenv -e .env.development craco build",
  }
}

运行项目​

$  yarn start