Skip to main content

前端项目开发

前置依赖​

环境依赖​

vite: v2.9.9  
node: v14.19.3 +  
yarn: v1.22.17 +

项目说明​

目前整个前端项目分为多个子项目独立开发（具体参考下方项目结构），为了开发方便将项目放到同一个git仓库并采用yarn workspace来统一管理项目依赖和打包。

因此本地开发时就需要分别独立的启动多个子项目来开发。

项目结构​

h5ds-web
    |-packages              子项目源码目录
        |- h5-admin         后台管理系统源码  
        |- h5-assets        项目中引用的公共资源  
        |- h5-editor        编辑器源码  
        |- h5-mobile        手机端源码  
        |- h5-plugins       编辑器插件源码  
        |- h5-preview       H5预览源码  
        |- h5-ui            UI组件  
        |- h5-web           前台系统源码  
        - .gitignore git     忽略提交配置文件  
        - README.md             自述文件
        - packages.json      node 包配置文件  
        - yarn.lock          包锁定文件
    |-www                   打包后的文件目录
        ......              具体目录结构参考下方说明

项目配置​

1、【必要】h5-assets目录的config配置​

h5-assets下是各个项目使用的公共文件，因此开发之前需要先修改此子项目中的配置信息

资源路径

dev环境：h5ds-web/packages/h5-assets/config/devConfig.ts

const devConfig = {
    resourcesHost: 'http://localhost:8080' // 资源路径，server启用的是本地存储时
    //resourcesHost: 'https://cdn.h5ds.com' // 资源路径，server启用的是oss存储时,填写oss的公网域名
};

prod环境：h5ds-web/packages/h5-assets/config/prodConfig.ts

window.prodConfig = {
    resourcesHost: 'http://localhost:8080' // 资源路径，server启用的是本地存储时
    //resourcesHost: 'https://cdn.h5ds.com' // 资源路径，server启用的是oss存储时,填写oss的公网域名
}

接口代理地址

h5ds-web/packages/h5-assets/config/viteConfig.ts

const config = {
    proxyTarget: 'http://localhost:8080'  //server接口地址,默认8080端口，具体信息参考【服务端项目开发】文档
};

2、【必要】首次构建​

由于各个子项目之间有相互的本地依赖，所以首次运行之前需要进行一次全项目的build

# 前端项目根目录下安装依赖并构建
$ cd h5ds-web

# 安装依赖
$ yarn install

# 执行构建，该构建命令会自动分发h5ds-assets下的配置文件到各个子项目中去，且会处理好个子项目之间的依赖关系
# 注意：该操作会将h5ds-assets的配置来把其他每个子项目下的配置文件强制覆盖掉（要是后续子项目开发过程中配置莫名还原就别奇怪了）
$ yarn build

3、其他​

如果是windows系统 需要先全局安装包

$ npm install -g esbuild-windows-64

备注：h5-web做了服务器端渲染，如果需要用ssr模式开发，需要在h5-web目录下执行yarn dev:ssr(详情请阅读h5-web下的README.md)

项目运行​

进入对应子项目目录启动服务，推荐开启多个终端窗口分别启动不同的子项目

# 启动web，默认监听8007端口
$ cd packages/h5ds-web
$ yarn dev 

# 启动editor，默认监听8003端口
$ cd packages/h5ds-editor
$ yarn dev

# 启动admin，默认监听8001端口
$ cd packages/h5ds-admin
$ yarn dev

...其他类似

每个子项目监听的端口配置位于h5ds-web/packages/*/vite.config.ts中

server: {
    host: '127.0.0.1',
    port: 8001,
    proxy: {
    '/api': {
        target: config.proxyTarget || 'http://node.h5ds.com',
        changeOrigin: true,
    },
    },
},

子项目依赖关系说明​

待补充

QA​

1、由于子项目都是独立启动的，每个子项目都有各自的监听端口，那么就会面临一个问题，如何从一个子项目的页面跳转到另一个子项目的页面中？

通过web项目登录系统并进入用户作品列表页面，点击创建作品，此时会跳转进入到editor项目的页面中去

官网上面看起来只是域名后的路径变了，但是在本地开发模式下，会将地址端口路径全部跳转到editor项目中并且携带上token以保证用户登录信息的连贯。

用户作品页面                                 创建/编辑作品      编辑器页面
http://lochost:8007/workbench/user/works       ->           http://lochost:8003/editor?appId=517269879500906496&token=****


目前做法是在web项目中配置了editor项目的端口：
h5ds-web/packages/h5-web/src/config/index.ts
const config = {
    nav: [
        {
        ...
        devPort: '8003', //开发环境下编辑器子项目端口
        },
    ]
}