Version: v22.04

2. 前端

在开始前，请确保开发环境已经配置完成：开发环境配置

简介

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

快速入门

step1: 执行npm run init
step2: 执行npm run dev
step3: 配置host或代理：127.0.0.1 local.wj.qq.com
step4: 访问local.wj.qq.com

目录与文件功能介绍

目录结构树概览

.
├── plugins
│   ├── slot
│   │   ├── assets
│   │   │   └── avatar.png
│   │   ├── global
│   │   │   ├── jquery.min.js
│   │   │   └── global.css
│   │   └── scenes
│   │       ├── mine
│   │       │   ├── index.css
│   │       │   ├── index.js
│   │       │   └── index.html
│   │       └── stat__overview
│   │           ├── index.html
│   │           └── index.js
│   └── 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/slot/scenes
文件夹对应的是相应的页面，斜杠(/)转换为双下划线(__),比如/stat/overview.html，就在plugins/slot/scenes目录下创建一个stat__overview的文件夹，放入对应的html、css和js，该页面就会植入对应的html、link和script，html是一个template，使用时将这个template先隐藏，在你想要的lifecycle或callback中插入即可。
plugins/slot/global
文件夹内存放的是所有页面都会加载的css与js，默认放入了一个jquery.min.js
plugins/slot/assets
放置资源文件，比如图片等，使用时直接用/selfhost/assets/(your asset)
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/
仅用于内部包的依赖安装，可以忽略

开发配置

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的相关配置，初始化默认会加上对应的配置，可以自行修改，主要使用webpack4，点击前往 webpack4 文档

常见问题

mac中运行会显示无法打开“×××”，因为无法确认开发者的身份
按住control键，双击Tselfhost.macos打开（或者右键打开，注意不要直接双击打开）
在弹窗中点击打开，随后关闭弹出来的终端，然后再运行对应的应用程序即可。只有第一次安装才会这样，这样操作一次就够了。
插件模式中slot与src的区别？
slot不进行es6-es5的语法编译，因为不走webpack编译，所以更新速度能达到毫秒刷，但是需要注意兼容性
src走问卷原生webpack编译，支持typescript语法，热更速度较慢
两者都支持es6的polyfill扩展语法支持，不支持es6+，需要注意兼容性。
html slot更改不会触发实时更新，需要手动刷新页面
修改配置、新增文件等的操作，需要重启脚本服务（npm run dev）
插件模式的slot方式不进行es6->es5编译，但有提供polyfill（es6），请注意兼容性
软件更新补丁(如有)我们会提供最新的一份脚本文件，更换即可
如有需要下载扩展包，直接npm install即可
scenes name的子目录命名规范为双下划线，如statoverview__
js加载顺序：问卷原有js->不编译global->不编译页面js

2. 前端

简介​

快速入门​

目录与文件功能介绍​

目录结构树概览​

目录详细介绍​

开发配置​

字段的使用说明：​

replace​

allowedHosts,host,port,https,proxy​

常见问题​

简介