#2 github1s 源码分析

Open
opened 1 year ago by lyq · 3 comments
天问 commented 1 year ago

(1)github1s项目结构

主要看三个目录: extensions 插件,resources其他资源文件,src源码。

查看 github1s package.json 文件知道 当执行 yarn build 之后执行下面三条命令:

"preinstall": "./scripts/pre-install.sh",
"postinstall": "husky install && ./scripts/postinstall.sh",
"build": "./scripts/build.sh",

1.1 先执行 pre-install.sh : 这条命令作用是安装 yum 系统依赖

yum groupinstall "Development Tools"
yum install libX11-devel.x86_64 libxkbfile-devel.x86_64 libsecret-devel rsync

1.2 然后执行 postinstall.sh

github1s依赖于 vscode 项目,首先检查是否 clone 了 vscode 源码,没有则执行clone vscode代码:

mkdir -p lib
cd lib
git clone --depth 1 -b 1.52.1 https://github.com/microsoft/vscode.git vscode

所以注意这里指定了版本:基于 vscode 1.52.1 开发。clone 到 lib 目录中:

1.3 然后执行 build.sh 命令

而build.sh 由三个子命令执行:

(1.3.1)

./build/sync-code.sh                 # rsync -a src/ lib/vscode/src

这个脚本的功能是把 github1s 源码 src 目录覆盖 vscode 目录,这样就达到了修改界面,启动执行的事件。

(1.3.2)

./build/build-vscode.sh

通过如下命令,构建vscode项目:

rsync -a resources/gulp-github1s.js lib/vscode   # 资源文件替换vscode源码
cd lib/vscode

yarn gulp compile-build
yarn gulp optimize --gulpfile ./gulp-github1s.js
yarn gulp minify --gulpfile ./gulp-github1s.js

上面构建之后出现三个目录:

github1s/lib/vscode/out-build
github1s/lib/vscode/out-vscode
github1s/lib/vscode/out-vscode-min

简单查看gulp-github1s.js文件,可以发现,构建输出到 out-vscode 目录,压缩js等代码后输出到 out-vscode-min。后面打包过程需要用到 out-vscode-min 这个目录。

(1.3.3)编译插件

./build/build-github1s-extensions.sh

这个脚本通过 for 循环,进入 extensions\ 下的每个子目录,如果有package.json 就对每个子项目执行 yarn compile,把每个项目打包,打包到对应插件的 dist 目录中。可以发现对 vscode 默认新加了 vue/go/flutter/scala/github1s 等支持。也就是这些插件默认会启动。

(1.3.4)打包

上面两个脚本已经把 vscode 源码 和 extensions 都编译成 js/html 等静态文件,接下来只需要把对应的生成文件打包即可,打包命令也分为几个步骤:

(1.3.4.1)首先复制构建好的 vscode 到 dist 目录

./package.sh
    ./package/copy-vscode.sh

把上面构建生成的 vscode 从 lib/vscode/out-vscode-min/ 复制到 dist/static/vscode

mkdir -p dist/static
rsync -a --del lib/vscode/out-vscode-min/ dist/static/vscode

(1.3.4.2)复制扩展到dist目录

    ./package/copy-extensions.sh

通过执行 copy-extensions.js 脚本,根据 resources\builtin-extensions.json 插件目录,循环遍历 extensions/xx目录,把它们复制到 dist/static/extensions 中:

        mkdir -p dist/static/extensions
        node scripts/package/copy-extensions.js

(1.3.4.3)复制依赖

   ./package/copy-node_modules.sh

把 lib/vscode/node_modules/ 中的指定依赖复制到 dist/static/node_modules 目录中。

mkdir -p dist/static/node_modules
dependencies=(vscode-textmate vscode-oniguruma xterm xterm-addon-search xterm-addon-unicode11 xterm-addon-webgl tas-client-umd iconv-lite-umd jschardet)

for dependency in ${dependencies[@]};
do
rsync -a --del lib/vscode/node_modules/${dependency} dist/static/node_modules
done

(1.3.4.4)复制资源文件

    ./package/copy-resources.sh

把其他的资源文件从 resources 复制到 dist中。

if [ "${IS_BUILD-}" ];
then
cp resources/index.html dist/index.html
else
cp resources/index-dev.html dist/index.html
fi
cp resources/favicon.ico dist
cp resources/manifest.json dist

(1.3.4.5)生成插件配置

    node ./package/generate-config.js

通过如下代码:

// 组织所有vscode插件
const extensions = [...scanBuiltinExtensions(), ...scanGithub1sExtensions()];

生成 **dist/static/configure/extensions.json **文件,这个文件不一定用到,后续删除试一下。

总之,build 之后再 dist 生成静态文件,删除.map文件后,静态 html 文件部署到云端即可,为了访问加速,可以采用 cdn 加速。

1.4 cdn 路径批量替换

考虑 cdn 部署效果会很好,那么抽离 static 目录到 cdn.yoqi.me 域名下,只留下 index.html 在 code.git.yoqi.me,极大优化访问速度:

todo

(2)vscode 启动分析

下面通过代码分析下 vscode 的启动过程,以及结合 github1s 项目对 vscode 的更改,有助于 gogs1s 的开发指导。首先将 vscode 代码切换到 1.52.1 tags。

2.1 入口文件 main.js

vscode 是一个 electron 项目,package.json中指定了入口文件:

"main": "./out/main",

vscode 采用 typescript 代码,编译后输出到./out/目录

2.2 github1s 所做的更改

可以发现 github1s 项目对 vscode 更改了 14 个文件的代码,使得启动 vscode web 版本之后,默认检测 url,并调用对应的api,获取项目文件列表。下面分析总结一下用到的 github api,以及 gogs1s 项目需要对应增加的api:

2.3 新增插件

extensions/github1s/src/github1sfs.ts

非官方弹框

src\vs\github1s\notification.ts

const notification = {
	title: 'ATTENTION: This page is NOT officially provided by GitHub.',
	content: 'GitHub1s is an open source project, which is not officially provided by GitHub.',
	link: 'https://github.com/conwnet/github1s',
};
## (1)github1s项目结构 主要看三个目录: extensions 插件,resources其他资源文件,src源码。 ![](https://git.yoqi.me/attachments/b26fcaa6-ca17-4838-9e61-7dabfb359e92) 查看 github1s **package.json** 文件知道 当执行 yarn build 之后执行下面三条命令: ``` "preinstall": "./scripts/pre-install.sh", "postinstall": "husky install && ./scripts/postinstall.sh", "build": "./scripts/build.sh", ``` **1.1 先执行 pre-install.sh** : 这条命令作用是安装 yum 系统依赖 ``` yum groupinstall "Development Tools" yum install libX11-devel.x86_64 libxkbfile-devel.x86_64 libsecret-devel rsync ``` **1.2 然后执行 postinstall.sh** github1s依赖于 vscode 项目,首先检查是否 clone 了 vscode 源码,没有则执行clone vscode代码: ``` mkdir -p lib cd lib git clone --depth 1 -b 1.52.1 https://github.com/microsoft/vscode.git vscode ``` 所以注意这里指定了版本:基于 vscode 1.52.1 开发。clone 到 lib 目录中: **1.3 然后执行 build.sh 命令** 而build.sh 由三个子命令执行: (1.3.1) ``` ./build/sync-code.sh # rsync -a src/ lib/vscode/src ``` 这个脚本的功能是把 github1s 源码 src 目录覆盖 vscode 目录,这样就达到了修改界面,启动执行的事件。 (1.3.2) ``` ./build/build-vscode.sh ``` 通过如下命令,构建vscode项目: ``` rsync -a resources/gulp-github1s.js lib/vscode # 资源文件替换vscode源码 cd lib/vscode yarn gulp compile-build yarn gulp optimize --gulpfile ./gulp-github1s.js yarn gulp minify --gulpfile ./gulp-github1s.js ``` 上面构建之后出现三个目录: ``` github1s/lib/vscode/out-build github1s/lib/vscode/out-vscode github1s/lib/vscode/out-vscode-min ``` 简单查看**gulp-github1s.js**文件,可以发现,构建输出到 out-vscode 目录,压缩js等代码后输出到 **out-vscode-min**。后面打包过程需要用到 out-vscode-min 这个目录。 (1.3.3)编译插件 ``` ./build/build-github1s-extensions.sh ``` 这个脚本通过 for 循环,进入 extensions\ 下的每个子目录,如果有package.json 就对每个子项目执行 yarn compile,把每个项目打包,打包到对应插件的 dist 目录中。可以发现对 vscode 默认新加了 vue/go/flutter/scala/github1s 等支持。也就是这些插件默认会启动。 (1.3.4)打包 上面两个脚本已经把 vscode 源码 和 extensions 都编译成 js/html 等静态文件,接下来只需要把对应的生成文件打包即可,打包命令也分为几个步骤: (1.3.4.1)首先复制构建好的 vscode 到 dist 目录 ``` ./package.sh ./package/copy-vscode.sh ``` 把上面构建生成的 vscode 从 lib/vscode/**out-vscode-min**/ 复制到 **dist/static/vscode**。 ``` mkdir -p dist/static rsync -a --del lib/vscode/out-vscode-min/ dist/static/vscode ``` (1.3.4.2)复制扩展到dist目录 ``` ./package/copy-extensions.sh ``` 通过执行 copy-extensions.js 脚本,根据 resources\builtin-extensions.json 插件目录,循环遍历 extensions/xx目录,把它们复制到 **dist/static/extensions** 中: ``` mkdir -p dist/static/extensions node scripts/package/copy-extensions.js ``` (1.3.4.3)复制依赖 ``` ./package/copy-node_modules.sh ``` 把 lib/vscode/node_modules/ 中的指定依赖复制到 **dist/static/node_modules** 目录中。 ``` mkdir -p dist/static/node_modules dependencies=(vscode-textmate vscode-oniguruma xterm xterm-addon-search xterm-addon-unicode11 xterm-addon-webgl tas-client-umd iconv-lite-umd jschardet) for dependency in ${dependencies[@]}; do rsync -a --del lib/vscode/node_modules/${dependency} dist/static/node_modules done ``` (1.3.4.4)复制资源文件 ``` ./package/copy-resources.sh ``` 把其他的资源文件从 resources 复制到 dist中。 ``` if [ "${IS_BUILD-}" ]; then cp resources/index.html dist/index.html else cp resources/index-dev.html dist/index.html fi cp resources/favicon.ico dist cp resources/manifest.json dist ``` (1.3.4.5)生成插件配置 ``` node ./package/generate-config.js ``` 通过如下代码: ``` // 组织所有vscode插件 const extensions = [...scanBuiltinExtensions(), ...scanGithub1sExtensions()]; ``` 生成 **dist/static/configure/extensions.json **文件,这个文件不一定用到,后续删除试一下。 总之,build 之后再 dist 生成静态文件,删除.map文件后,静态 html 文件部署到云端即可,为了访问加速,可以采用 cdn 加速。 ### 1.4 cdn 路径批量替换 考虑 cdn 部署效果会很好,那么抽离 static 目录到 cdn.yoqi.me 域名下,只留下 index.html 在 code.git.yoqi.me,极大优化访问速度: ```todo todo ``` ## (2)vscode 启动分析 下面通过代码分析下 vscode 的启动过程,以及结合 github1s 项目对 vscode 的更改,有助于 gogs1s 的开发指导。首先将 vscode 代码切换到 1.52.1 tags。 ### 2.1 入口文件 main.js vscode 是一个 electron 项目,package.json中指定了入口文件: ``` "main": "./out/main", ``` vscode 采用 typescript 代码,编译后输出到**./out/目录**。 ### 2.2 github1s 所做的更改 ![](https://git.yoqi.me/attachments/3aa32e0e-6913-4ebb-8e58-416a76fa99c8) 可以发现 github1s 项目对 vscode 更改了 14 个文件的代码,使得启动 vscode web 版本之后,默认检测 url,并调用对应的api,获取项目文件列表。下面分析总结一下用到的 github api,以及 gogs1s 项目需要对应增加的api: | | | | | ---- | ---- | ---- | | | | | | | | | | | | | ### 2.3 新增插件 extensions/github1s/src/**github1sfs.ts** ### 非官方弹框 **src\vs\github1s\notification.ts** ``` const notification = { title: 'ATTENTION: This page is NOT officially provided by GitHub.', content: 'GitHub1s is an open source project, which is not officially provided by GitHub.', link: 'https://github.com/conwnet/github1s', }; ```
天问 commented 1 year ago
Owner
There is no content yet.
天问 commented 1 year ago
Owner
There is no content yet.
天问 commented 1 year ago
Owner
类似项目: **github.surf** https://github.com/bridgedxyz/github.surf **github1s.com** https://github.com/conwnet/github1s
Sign in to join this conversation.
No Milestone
No assignee
1 Participants
Loading...
Cancel
Save
There is no content yet.