## 前端开发环境搭建

<font color="red">注：前端开发环境搭建过程与后端十分类似，用搭建后端的过程来理解即可</font>
> 维护人员： bokang.xiao
### step 1 安装node.js 确保本机安装有node环境

```markdown
+ 检查是否安装成功 node --version
```

### step 2 安装 yarn

```markdown
+ 通过命令下载全局安装 npm install --global yarn 
+ 测试是否安装成功 yarn --version
```

### step 3 创建一个项目

![image-20221220182522460](static/image-20221220182522460.png)


### step 4 拉取客户历史文件

+ 通过客户客户卡片获取历史文件地址![image-20221220182859768](static/image-20221220182859768.png)

+ 通过地址获取历史文件

  - Windows > 在文件资源管理器输入对应地址 

    ![image-20221220183151560](static/image-20221220183151560.png)

  - mac > 
  
    - 通过下图连接文件服务器
    ![image-20221220183358737](static/image-20221220183358737.png)
    
    - 按照路径找到对应的文件即可
    
      ![image-20221220183613700](static/image-20221220183613700.png)
  

### step 5 复制依赖文件

+ 将历史文件 src4js-pctool-v1 目录复制到刚刚新建的项目中![image-20221220184145792](static/image-20221220184145792.png)

+ 新建名为src4js的目录（此目录即为源码存放目录），将历史文件目录src4js下的文件以下文件拷贝到新建的项目中		![image-20221220184512046](static/image-20221220184512046.png)

+ 在项目中根据需求新建对应的目录，比如需要修改pc端的源码，就新建pc4mobx目录

### step 6 初始化项目

+ 新建编译后文件输出目录 spa

	 ![image-20221220185408930](static/image-20221220185408930.png)
	
+ 将要修改的源码放到src4js的对应目录下

   + 例如需要修改pc端会议模块的源码，就将历史文件中的源码复制到项目的对应目录下

      ![image-20221220185827890](static/image-20221220185827890.png)


### step 7 下载依赖

+ 到目录src4js-pctool-v1下在终端执行依赖下载命令 yarn install		![image-20221220192320090](static/image-20221220192320090.png)

### step 8 修改源码，编译文件

+ 修改源码不做演示，这里直接演示如何编译

+ 在 /src4js-pctool-v1/pctool_all.sh 文件中查找对应模块的编译命令 	![image-20221220194017173](static/image-20221220194017173.png)

+ 在终端执行编译命令![image-20221220194207500](static/image-20221220194207500.png)

+ 编译成功后可以在spa目录下看到对应的文件![image-20221220194310887](static/image-20221220194310887.png)

### step 9将编译好的文件放到服务器对应的目录下（无需重启）



***