2. 前端

简介

此工具能更好的与外部开发者进行一个协同工作开发，无须关心内部的复杂逻辑，通过外部扩展的css和js就能对问卷的每个页面实现定制功能的开发。

快速入门

• step1: 配置host或代理：127.0.0.1 local.wj.qq.com (推荐全局安装whistle使用代理)

• step2: 执行npm install

• step3: 可以选择以下两种运行方式，第一种为cos下载的二进制文件，放入根目录中执行；第二种是docker的运行方式，可以选择其中一种配置到package.json的script中的dev，这样通过运行npm run dev即可。

  • cross-env NODE_PATH=./node_modules ./Tselfhost-xxxx（xxxx对应运行环境）
  • docker run -v $(pwd):/ws -p 443:443 cdchub.tencentcloudcr.com/ur-selfhosted/selfhost-tool-xxxx （xxxx对应运行的项目）

• step4: 访问local.wj.qq.com

目录与文件功能介绍

目录结构树概览

.├── plugins│   ├── public│   │   ├── avatar.png│   │   └── favicon.ico│   ├── global│   │   ├── global.ts│   │   └── global.less│   └── src│       ├── components│       │   └── demo│       │       ├── avatar.png│       │       ├── utils.ts│       │       └── index.tsx│       └── scenes│           └── demo│               ├── App.jsx│               ├── index.ejs│               ├── index.js│               └── index.less├── resource├── types├── tencent-dependencies└── selfhost.config.js

目录详细介绍

• plugins/public

  同webpack public，可用于存放一些图片以及覆盖favicon.ico

• plugins/global

  全局注入的js与css，在webpack entry的首位优先加载

• plugins/src/components

  新增component(自定义react组件)的时候使用，里面不但可以引用对应的js文件，也可以引用图片等资源文件（使用了file-loader），自定义组件的引用为self-src/components/*

• plugins/src/scenes

  该目录下会检测原有的页面与新增页面，新增页面可以直接使用命令行npm run creat <scenes name>，就会自动创建一个模版页面。原有页面只支持一个index.js入口，如：plugins/src/scenes/mine/index.js，可在里面执行react dom render。

• resource/

  问卷逻辑原文件放置，如果有必要，可以通过向问卷团队获取相对应的文件，实现源文件的修改，引用源项目的自定义组件的方式为components/*。

• types/

  腾讯问卷内部conponents组件的类型文件，用于ide的提示作用，也可以进行相关的查阅使用。(熟悉typescript可以查看tsconfig.js相关配置)

• tencent-dependencies/

  仅用于内部包的依赖安装，可以忽略

• .env.local

  单页调试，命名规范和上面scenes一样，比如要调试user页面，则传入WEBSHOP_ENTRY=user，多个页面以逗号分割，如WEBSHOP_ENTRY=user,login,v3__survey

开发配置

selfhost.config.js是一个配置文件，配置结构图如下

module.exports = {    replace,    allowedHosts,    host,    port,    https,    proxy,}

字段的使用说明：

replace

在开发环境下，可能会有替换不全的问题，因为涉及到构建的历史问题，所以不会对少部分的一些文件进行一个文案替换修改。但是在生产环境下，因为是对输出资源的资源数据进行替换，所以可以覆盖到所有文件。

• pattern可以是一个字符串，也可以是一个正则表达式的匹配方法，replacement为一个替换后的字符串。
• 替换的规则是从上到下的匹配规则，比如数组的第一项的pattern是"腾讯"，第二项的pattern是"腾讯问卷"，那么会造成的后果是找不到第二项的替换不会成功，因为"腾讯"两个字已被替换，所以要注意排序问题。

示例：

replace: [        {            pattern: '腾讯问卷',            replacement: '问卷调查',        }    ]

allowedHosts,host,port,https,proxy

同webpack devServer的相关配置，初始化默认会加上对应的配置，可以自行修改，主要使用webpack5，点击前往 webpack5 文档

常见问题

• mac中运行会显示无法打开“×××”，因为无法确认开发者的身份

  按住control键，双击Tselfhost.macos打开（或者右键打开，注意不要直接双击打开）

  在弹窗中点击打开，随后关闭弹出来的终端，然后再运行对应的应用程序即可。只有第一次安装才会这样，这样操作一次就够了。

• 修改配置、新增文件等的操作，都需要重启一下脚本服务（npm run dev）

• 软件更新补丁(如有)我们会提供最新的一份脚本文件，更换即可。

• 如有需要下载扩展包，直接npm install即可

• scenes name的子目录命名规范为双下划线，如statoverview__

• js加载顺序：global->问卷原有js