2025 了，前端开发还有什么地方能提高开发效率

seven108
55 阅读6分钟

前端开发还有什么地方能提高开发效率

前端发展至今，精耕细作这么多年，不管前端工程化，还是最返兴起的AI编程，整体架构都已经很成熟了，但往往在一些细节处且被人遗忘，其中有一个场景，在前端开发中经常遇到，但很少人注意到，这也是可以节省时间的一部分，那就是前端开发中面临的多帐号，多环境的问题

前端开发中面临的多帐号，多环境的问题

在前端开发中我们经常要在不同的帐号间切换，以解决不同帐号下数据问题引起的BUG，同时也需要在不同的环境中做切换，如开发环境，测试环境，正式环境，不同的环境意味着用不同的后端服务 api 前缀，不同的环境变量。

在我看来这些与开发无关的事情，都是应该我们努力去减少的时间，需然每次更改的花费的时间不多，但耐不住他操作频繁，就每次只消耗几分钟，一天下来可能也是好几十分钟的事情，而且这些事情可能会打断我们的编码连贯性，特别是切换环境的时候

在精耕细作的今天，就算是一点时间，我们理应也不能浪费在这上面，那我们应该怎么节省这些时间呢？

常规的解决方案

不同的账号

对于不同的账号，我们可以通过浏览器记住密码，但很多时候同一个域名只会记住一个密码，我们还是需要退出帐号，输入帐号，如果浏览器记住密码了，我们也只是少了输入密码的时间；

不同的环境

面对不同环境，我们需要去修改环境变量，如不同的后端服务的 api 前缀，不同的CLIENT_SECRET，或不同的应用 ID 等一些变量，改完后还需要重启服务

理想的解决方案

那在我看来理想的方式应该是怎么样的?

  1. 有一个可视化的帐号管理的地方，我只需要在这里切换帐号，就能自动退出登录，并重新登录新帐号
  2. 每个帐号与特定的环境变量及请求 api 的绑定，如测试环境的帐号对应的就是测试环境的变量，及对应的后端服务的前缀。
  3. 没有代码入侵，不管是环境变量，还是账号，这些都是敏感信息，这些都不应在我代码上有体现

释放前端生产力，节省研发团队的每一分钟

我们想要工具，希望他是轻量的，并且能解决上面提到的所有问题，这里推荐一个工具mocxykit，他是一个 webpack 或 vite 的插件，只需要两行代码就能集成到项目中。本身也是一个 mock数据及代理的管理工具

mocxykit的主要功能

  • 代理请求和 MOCK数据
  • 可视化的管理 MOCK 数据及代理功能
  • 代理支持全局代理和某一个 URL 的自定义代理
  • 可随时切换某一个URL进行代理转发或 MOCK 数据
  • 可通过不同的入参，返回不同的MOCK 数据
  • 可以快速把最近的请求返回的数据，存为 MOCK 数据
  • 支持 faker 随机MOCK数据生成
  • 支持多环境变量管理，随时切换环境变量
  • 支持 Ngrok 公网访问
  • 支持 MCP 协议，让 AI 编程时，自动获取 MOCK 数据或最近浏览器请求的数据
  • 内置API请求工具，可直接发送和测试API请求

安装mocxykit

首先先安装这个插件

npm install mocxykit --save-dev

然后以 vite 为例，改变vite.config.js(如果没有这个文件，可以在根目录创建下) 的配制，添加这个插件

import { defineConfig } from 'vite'
import { viteProxyMockPlugin } from 'mocxykit'

export default defineConfig({
  plugins: [
    viteProxyMockPlugin()
  ]
})

启动项目，在浏览启上访问项目，这个时候就会看到项目的右下角多了一个(proxy&mock 配制)按钮

image.png

设置一个全局代理

设置后端服务的 api 前缀
  1. 选配制不同的后端服务的 api 前缀，这也是一个代理，只要请求到path，就会走到代理服务，然后通过这里的配置指定请求到哪个服务，所以在开发环境不管要请求哪个服务，在代码层面都能把开发环境的前缀写死为空字符；

image.png

设置环境变量

点击管理界面的左上角环境变量的加号，然后把环境变量添加进来

image.png

image.png

可以看到，下面的信息才是我们配制在.env.development或.env.production文件中的信息，这里配制的环境变量会覆盖 env 文件中的信息（不会写这些文件，只是读值的时候覆盖），从而实现动态切换的功能，而上面的是我们的帐号信息，相当于我们的帐号信息，也是一种环境变量，这样就能让我们的帐号与环境变量绑到了一起.所以这里我们最好的命名是“环境-帐号”

信息安全

可能也有人注意到了；这些都是敏感信息，会不会不小心上传到 git 上？这个不用提心，在你点 OK后，这个信息会保存到一个文件上，但同时也会自动在 gitignore上添加一行proxyMockData/env.json以防止，不小心上传。

切换环境变量

在新增完环境变量后，你就可以在右上角上点击切换不同的环境变量了，同时只要切换环境变量，就会自动重新编译，而不需要重启服务。这样就实现了可视化的账号管理。

image.png

实现自动登录

前面我还说到需要自动登录的功能，这里我们只需要在自已的项目添加一个自动登录的逻辑，判断有对应环境变量的情况下，就自动触发登录，同时因为在 mocxykit 切换环境变量时会自动清除 cookie 和 localStorage并刷新页面,那你的项目理论上没有登录信息后会自动跳到登录页，从而实现自动登录的功能.

const Login: React.FC<LoginFormProps> = ({ onSuccess }) => {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const { uploadPermissions } = usePermissions();
  // 添加自动登录函数
  const autoLogin = async () => {
    if (process.env.NODE_ENV === 'development') {
      const envTenant = process.env.VITE_APP_TENANT;
      const envAccount = process.env.VITE_APP_ACCOUNT;
      const envPassword = process.env.VITE_APP_PASSWORD;

      if (envTenant && envAccount && envPassword) {
        const values = {
          tenantView: envTenant,
          account: envAccount,
          password: envPassword
        };
        form.setFieldsValue(values);
        await handleLogin(values);
      }
    }
  };

  // 添加自动登录效果
  useEffect(() => {
    autoLogin();
  }, []);
  ......
 }

环境变量绑定代理

在新增或编辑环境变量的时候，可以选择绑定环境变量，这样在切换帐号环境的时候，就会自动切换对应的后端服务。到这里就完成实现了，我想要的功能，可视化管理，一键切换。

avatar
文章
阅读
粉丝