前端开发新篇章：AI 助力效率激增！

2023-12-27
上海
本文字数：2628 字
阅读完需：约 9 分钟

写在前面的话

在这个转瞬即逝的一年里，我们见证了时间的飞逝和技术的跨越。特别是 ChatGPT 的出现，这不仅是一个技术的飞跃，更是我们作为开发者历程中的一座重要里程碑。这个智能助手不仅改变了我们与信息、知识的互动方式，更为我们的工作带来了前所未有的便利和灵感。随着 ChatGPT 的加入，我们的开发过程变得更加高效，创新的思维也被无限激发。

在这一年中，前端开发的界限被重新定义，新的框架和工具的出现，使得我们的工作更加高效和多样化。这种技术的进步不仅提高了开发的效率，也极大地丰富了用户的互动体验，它也改变了我学习技术的方法论以及解决问题的策略。

下面我们会先回顾一下 2023 前端的变化，然后接着来聊聊 AI 赋能前端，我是怎么玩的。

前端圈发生的变化

下面我们简单的过一下 2023 前端发生的变化：

主流浏览器都开始支持原生 CSS 嵌套写法

Rspack 发布

它是一个基于 Rust 的高性能构建引擎，具备与 Webpack 生态系统的互操作性，可以被 Webpack 项目低成本集成，并提供更好的构建性能。

TypeScript 更新了 4 个版本

TypeScript 5.0
TypeScript 5.1
TypeScript 5.2
TypeScript 5.3

具体更新内容，链接会放在文章末

Electron 更新了 6 个版本

Electron 23.0.0
Electron 24.0.0
Electron 25.0.0
Electron 26.0.0
Electron 27.0.0
Electron 28.0.0

谷歌正式发布 WebGPU！90 多位贡献者研发 6 年，浏览器终于可以利用底层硬件了

Vite 更新

在 2023 年，Vite 进行了多次更新，包括 5.0.10、5.0.9、5.0.8、5.0.7、5.0.6、5.0.5 和 5.0.4 版本。此外，还发布了 create-vite@5.1.0 版本。这些更新显示了 Vite 项目的积极开发和改进。

Vue3 更新 3.3 版本

Vue 3.3 版本:

发布日期：5 月 11 日。
代号：Rurouni Kenshin。
主要更新：针对开发者体验进行了改进，特别是在使用 TypeScript 时的 SFC <script setup>。与 Vue 语言工具（以前称为 Volar）1.6 的发布相结合，解决了在使用 TypeScript 时存在的许多长期困扰问题。

ECMAScript 2023 - Exploring New Features

增加了一些新 api

来谈谈 AI 如何赋能的前端

下面来谈谈 AI 给我带来了哪些提效和变化。

代码生成

很多时候，我们都在写重复实现过的代码，有了 AI，我们可以让它快速生成对应的代码，这样多出很多时间来，开发效率也提升了。例如：

下面是它生成的代码

<template>  <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px">    <el-form-item label="用户名" prop="username">      <el-input v-model="loginForm.username"></el-input>    </el-form-item>    <el-form-item label="密码" prop="password">      <el-input type="password" v-model="loginForm.password"></el-input>    </el-form-item>    <el-form-item>      <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>      <el-button @click="resetForm('loginForm')">重置</el-button>    </el-form-item>  </el-form></template>
<script lang="ts">import { defineComponent, ref } from 'vue';import { ElForm, ElInput, ElFormItem, ElButton } from 'element-plus';
export default defineComponent({  components: {    ElForm,    ElInput,    ElFormItem,    ElButton  },  setup() {    const loginForm = ref({      username: '',      password: ''    });
    const rules = {      username: [        { required: true, message: '请输入用户名', trigger: 'blur' },        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }      ],      password: [        { required: true, message: '请输入密码', trigger: 'blur' },        { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }      ]    };
    const submitForm = (formName: string) => {      const form = loginForm.value as any;      form.validate((valid: boolean) => {        if (valid) {          alert('submit!');          // 在这里执行登录逻辑        } else {          console.log('error submit!!');          return false;        }      });    };
    const resetForm = (formName: string) => {      const form = loginForm.value as any;      form.resetFields();    };
    return {      loginForm,      rules,      submitForm,      resetForm    };  }});</script>
<style scoped>/* 在这里添加样式 */</style>

复制代码

代码优化

这样执行效率也提升了，从而技术也提升了，它会解释你的代码，并且将优化的操作一步步讲解给你。

BUG 统治者和调节者

在没有 AI 之前，相信很多小伙伴都是遇到问题[BUG] ，各种 Search，当你解决完了，然后一个一个 Tab 页的关闭，有没有很熟悉，在 Search 的过程需要花费很大的时间去试错，时间成本花费了很多。现在有了 AI，直接把报错丢给它，它可以直接给出详细的解决方案，以及建议等；当有时遇到难解决的问题，你只要不断的把诉求 push 给它，它慢慢吸收，会给你一步一步推敲出你的问题所在，从而有了新灵感。

例如 Uncaught Error: [Vue warn]: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself.