轮子

背景 在日常工作中，我们经常需要 clone 远程的 Git 仓库。 一般我会创建一个文件夹，比如 ~/code。然后在这个文件夹下 clone Git 仓库。 但这样做会导致一些问题： 遇到同名的 Git 仓库，会报 fatal: destination path 'xxx' already exists and is not an empty directory. 的错误。 公司内部的 Git 仓库和开源的 Git 仓库，用户名和邮箱不一样，需要对全局的 Git 配置做修改。 本文将介绍一款自己开源的的 cli 工具：mgre 帮助大家解决这些问题。 如何解决 通过调研发现，已经有一些类似的工具，比如 projj, tanyao 等工具实现了类似的功能。 但是这些工具都有一些问题： projj 已经很久没有更新了，issue 和 pr 都没有人处理。 tanyao 提供的功能比较少，只能 clone 仓库。 所以我决定自己开发一个工具，实现自己想要的功能。 如何使用 mgre 安装 # With pnpm $ pnpm install -g mgre # With yarn $ yarn global add mgre # With npm $ npm install -g mgre Clone 当我们需要 clone 一个仓库时，只需要执行 mgre clone 命令即可，比如...

背景 我们团队的小伙伴写了许多的油猴脚本，通过它们的帮助我们减少了许多重复性的工作，让我们可以聚焦更加有意义的事情。但我们团队在油猴脚本上也遇到了一些问题，比如： 使用原生 js 编写代码，不符合现在模块化编程的理念 油猴脚本未放在一个仓库，导致我们需要导入多个油猴脚本 综合以上原因，我们首先考虑的是把现有的脚本统一放在一个仓库内，但是如果要解决第二点的问题，这还不够。我们需要有一套打包方案，把想同功能的脚本代码放在一起，才能让用户不需要启用多个油猴脚本。 是的，通过基于 Webpack 的打包方案我们可以完美解决第一点以及第二点的问题。但有个前提，如果你对油猴脚本熟悉的话，你会了解到油猴脚本有一个 @match 字段。这个字段是用来告诉油猴脚本需要在哪个网页加载这些代码。 那么我们已经可以想到了，我们写的这些油猴脚本不一定都是在同一个网页上运行的。所以就算我们通过 Webpack 聚合了部分想同域名的脚本，其他域名的脚本用户还是会有多次导入的情况，那么我们怎么解决这个问题呢？ 本问将讲述我们团队如何解决油猴脚本迁移问题以及 Chrome 扩展开发时的热更新问题。 问题的思考 油猴脚本提供了许多的能力，@match 定义脚本加载的网页，@run-at 定义脚本的插入时机等。这些能力都来源于油猴扩展，油猴扩展可以管理多个油猴脚本。想到这里，我们之前的问题是不是已经迎刃而解了呢？ 做一个 Chrome 扩展 是的，最终的方案也就是做一个 Chrome 扩展。 我这里先简单介绍一下 Chrome 扩展： Chrome 扩展是一个包含了多个文件的压缩包，由 HTML、CSS、JavaScript、图片以及任何你需要的文件组成，目的是为 Chrome 浏览器添加特定的功能。扩展本质上是一个网页，因此可以使用浏览器为网页提供的 API，扩展还可以操作浏览器内置功能，如书签、下载管理等。 HTML、CSS、JavaScript 这三剑客我想你如果是前端工程师，并不会陌生因为我们工作中都会用到这些技术。但 Chrome 扩展由于定位的特殊性，它还需要一个 manifest.json 文件描述 Chrome 扩展的基础信息，比如名称、版本、图标、权限等等。 以下是一份示例文件： { "name": "My Extension", "description": "A nice little demo extension.", "version": "2.1", "manifest_version": 3, "icons": { "16": "icon_16.png", "48": "icon_48.png", "128": "icon_128.png" }, "background": { "service_worker": "background....