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