2021-07-14-react开发环境配置

桓喜

2023-12-01

react

在终端中执行如下命令安装 Xcode 命令行工具
```
xcode-select --install
```
注意： Xcode 命令行工具已经包含了 git 命令，如果需要图形化的 git 工具，可以安装 SourceTree。
为自己的开发机生成一对密钥，包含公钥和私钥。
```
ssh-keygen -t rsa -C "这里填你的办公邮箱地址"
```
在终端中执行如下命令显示公钥
```
cat ~/.ssh/id_rsa.pub
```
复制公钥内容，填入 GitLab。点击这里添加密钥。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGmYockx-1626251070246)(/assets/ssh-keys.png)]

配置前端本地开发环境

For Mac

在 App Store 中安装 Xcode
在终端中执行如下命令安装 Xcode 命令行工具
```
xcode-select --install
```

在终端中执行如下命令安装 brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

在终端中执行如下命令安装 nvm
```
brew install nvm
```
注意： 安装完成后，需要在 ~/.bash_profile 文件中添加如下两行：
```
export NVM_DIR="$HOME/.nvm"
. "/usr/local/opt/nvm/nvm.sh"
```
为了不重启就让 ~/.bash_profile 文件的修改生效，还需要在终端中执行如下命令：
```
source ~/.bash_profile
```
可选： 如果需要替换 nvm 镜像，可以设置环境变量：
```
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
```
在终端中执行如下命令安装 node
```
nvm install 10.0.0
```

在终端中执行如下命令替换 npm 镜像

npm config set registry http://registry.npm.tongdun.cn/

下载并安装 Visual Studio Code
在 Visual Studio Code 中使用快捷键 Shift + Command + P 打开命令面板搜索并执行命令：
```
install 'code' command in PATH
```

For Windows

TODO…

For Linux

TODO…

开发流程

目录结构：

[root]
 ├── .gitignore # GIT 提交忽略列表
 ├── .npmignore # NPM 发布忽略列表
 ├─┬ bin
 │ └── www # Web 应用入口，执行 npm run start 启动此入口
 ├── build # 目标代码目录，执行 npm run build 编译得到此目录
 ├── config # 配置目录，开发时一般不用修改
 ├── node_modules # 模块目录，执行 npm install 将依赖项安装到此目录
 ├── public # 静态资源目录
 ├── server # Web 应用代码目录，开发时一般不用修改
 ├─┬ src # 源码目录
 │ ├── layout # 布局目录
 │ ├── page # 页面目录
 │ ├── service # 服务目录
 │ └── app.js # 页面脚本入口
 ├── app.js # Web 应用类
 ├── package.json # 包配置信息
 └── webpack.config.js # Webpack 编译配置信息

开发步骤：
1. 将应用代码下载到本地
2. 执行如下命令安装依赖项：
```
npm install
```
3. 执行如下命令启动开发版 Web 应用：
```
npm run dev
```
  注意： 如需停止应用，可使用快捷键 Control + C
4. 在浏览器中查看效果，链接通常是 http://localhost:3000
  
  注意： 在开发版应用环境下，对页面的任何修改将实时生效。
提交步骤：
1. 执行如下命令编译代码：
```
npm run build
```
2. 执行如下命令启动生产版 Web 应用：
```
npm run start
```
  注意： 如需停止应用，可使用快捷键 Control + C
3. 在浏览器中查看效果，链接通常是 http://localhost:3000
4. 确认自测通过，将代码提交到 Git 仓库

开发规范

一个应用应该是一个标准的 Npm 模块，它导出一个 Koa 应用实例。通常，它提供 bin/www 入口文件用于测试这个 Koa 应用实例。
禁止提交 node_modules 目录。

注意： 提交 node_modules 目录会破坏项目可在不同环境运行的能力。
禁止提交密钥。

注意： 提交密钥会有安全风险。

原则上需锁定依赖项版本。一个参考配置如下：

// package.json

...
    "dependencies": {
        "config": "3.0.1",
        "cross-env": "5.2.0",
        "koa": "2.7.0",
        "koa-convert": "1.2.0",
        "koa-mount": "4.0.0",
        "koa-onerror": "4.1.0",
        "koa-router": "7.4.0",
        "koa-static": "5.0.0",
        "koa-views": "6.1.5",
        "moment": "2.24.0",
        "nunjucks": "3.1.7"
    },
    "devDependencies": {
        "@alifd/next": "1.11.8",
        "@material-ui/icons": "3.0.2",
        "react": "16.5.0",
        "react-dom": "16.5.0",
        "url": "0.11.0"
    }
...

接口通信传递和接收ID等参数时，不得使用64位整数，因前端不支持64位整数，请改用字符串类型。
表格记录需要有主键。表格已默认指定主键primaryKey=id，如主键不是默认名称，需手动指定。
实现文件下载、文件导出、音频播放等功能时，禁止缓存。

文件下载、文件导出、音频播放都应该获得最新的文件，禁止缓存。
禁止缓存还可以避免 CORS 错误。
禁止缓存的手段有：(1). 服务端禁止缓存、(2). 客户端添加时间戳。
实现文件下载功能时，禁止发送请求获得下载地址的全部或一部分。

注意： 浏览器禁止从脚本异步触发下载（下载本身是异步的，但异步触发是不可以的），发送请求本质上是一个异步过程。
实现文本复制功能时，禁止发送请求获得待复制的文本。

注意： 浏览器禁止从脚本异步复制文本，发送请求本质上是一个异步过程。
原则上日期文本不断行。
原则上 IE 浏览器兼容到 IE 10。
图标使用 SVG 格式。

浏览器兼容性

document.querySelector
document.body.classList.toggle

Docker

编译

docker build --no-cache -t ai-sso-app:1.0.0 \
--build-arg PACKAGE_NAME=@td/ai-sso-app \
--build-arg NPM_REGISTRY=http://registry.npm.tongdun.cn/ \
.

运行

docker run -it --name ai-sso-app -p 3001:3000 --mount type=bind,source="$(pwd)"/config,target=/app/config ai-sso-app

终端连接

docker exec -it ai-sso-app /bin/ash

部署

容器部署
虚拟机部署
Docker 部署

2021-07-14-react开发环境配置

react

目录

前端开发指南

配置环境

配置 Git

配置前端本地开发环境

开发流程

开发规范

浏览器兼容性

Docker

部署

相关阅读

相关文章

相关问答

相关文档