<div class="article-content">
<p>此文粗略记录用 React+TypeScript+Firebase 实现一个用来统计 Gitlab Spent Time 的 Chrome Extension 的过程。</p>
<p>内容包括：</p>
<ul><li>背景</li><li>功能介绍</li><li>如何使用</li><li>用 Webpack 配置多个 js 入口</li><li>使用 TypeScript</li><li>把它变成 Chrome extension</li><li>使用 Firebase Auth 实现注册登录</li><li>使用 Firestore 存取数据</li></ul>
<p>项目地址: <a href="https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fbaurine%2Fgitlab-time-report">GitHub</a></p>
<h2 class="heading">背景</h2>
<p>当初想写这个扩展的动机，是源于我们公司将项目管理平台从 Redmine 切换到了 GitLab，GitLab 相比 Redmine 确实更加 fashion，但它有一个我们很需要的功能却不完善，就是时间统计报表，我们需要为每一个 issue 记录所花费的时间，在 Redmine 上，PM 可以方便地查询和生成每个人在某个时间段花费的时间报表，但 GitLab 不行，因此 PM 很头疼，于是想到写这个插件来减轻他们的痛苦。</p>
<p>我们试过一些第三方工具，比如 <a href="https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fkriskbx%2Fgitlab-time-tracker">gtt</a>，但这些工具一是耗时很长 (都是通过 GitLab API 先遍历 projects，再遍历 project 下的 issues，最后遍历 issue 下的 time notes)，二是对于 PM 来说，使用太复杂 (gtt 是一个命令行工具，而且参数众多)。</p>
<p>当然，其实最后 PM 们也没用上我这个工具，因为后来发现了更简单的办法，通过查阅 GitLab 的源码，发现实际上在 GitLab 的 database 中，是有一个叫 timelogs 的表，直接存放了 time notes，但是很遗憾 GitLab 并没有开放任何 API 去访问这个表，于是我们写了一个 rails 的项目，直接去访问 GitLab 的 database 来生成报表 (这个项目还在内部完善中)。</p>
<p>虽然如此，我还是通过这个项目学习到了很多，学习到了 TypeScript 的使用，Firebase 的使用，加深了对 Webpack 的理解。我会把它作为我的 side project 继续优化。</p>
<h2 class="heading">功能介绍</h2>
<p>(用星号隐去了一些真实信息)</p>
<ol><li> <p>在每一个 issue page 为每一个 issue 生成实时的 spent time 报表</p> <p></p>
<figure>
<figcaption></figcaption>
</figure><p></p> <p></p>
<figure>
<figcaption></figcaption>
</figure><p></p> </li><li> <p>为所有项目和用户生成实时的 spent time dashboard</p> <p></p>
<figure>
<figcaption></figcaption>
</figure><p></p> <p></p>
<figure>
<figcaption></figcaption>
</figure><p></p> <p></p>
<figure>
<figcaption></figcaption>
</figure><p></p> </li><li> <p>一个快速 log 今天的 spent time 的按钮，用来解决时区问题，如果服务器布署在另一个相距较远的时区</p> <p></p>
<figure>
<figcaption></figcaption>
</figure><p></p> </li></ol>
<h2 class="heading">如何使用</h2>
<p>因为这个扩展推荐在各个公司内部自己使用，所以并没有发布到 Chrome Store。</p>
<p>如果你想尝试或有这个需求，可以看这个文档：</p>
<ul><li><a href="https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fbaurine%2Fgitlab-time-report%23how-does-the-extension-work">How does the extension work</a></li></ul>
<h2 class="heading">用 Webpack 配置多个 js 入口</h2>
<p>我们用 React 来实现这个扩展，网上搜到的用 React 来实现 Chrome extension 的示例都是用 create-react-app 脚手架来写的，但由于这个扩展需要两个 js 文件，一个用来注入到每个 gitlab 的 issue 页面，一个用来展示 dashboard page。但 create-react-app 只能输出一个 js 文件，而通过 <code>yarn eject</code> 出来的 webpack.config.js 太复杂了，所以只好手动配置 Webpack，输出两个 js 文件。</p>
<p>这里用的是 Webpack4，整个配置过程在 tag <code>webpack4_boilerplate</code> 上可以看到，参考了之前的笔记：</p>
<ul><li><a href="https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fbaurine%2Fjs-study%2Fblob%2Fmaster%2Fnotes%2Fwebpack3-note.md">Webpack3</a></li><li><a href="https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fbaurine%2Fjs-study%2Fblob%2Fmaster%2Fnotes%2Fwebpack4-note.md">Webpack4</a></li></ul>
<p>多个输出的配置：</p>
<pre class="blockcode"><code class="copyable">// webpack.config.js
module.exports = {
entry: {
dashboard: './src/js/dashboard.tsx',
'issue-report': './src/js/issue-report.tsx',
},
output: {},
...
}
<span class="copy-code-btn">复制代码</span></code></pre>
<p>配置了两个 js 入口，output 选项为空保持默认，这样输出会放到默认文件夹 dist 中，输出的 js 文件名与 entry 中定义的 key 同名。这样从 dashboard.tsx 入口开始的代码将会打包成 dashboard.js，从 issue-report.tsx 入口开始 |
|
转播
