AI编程助力 | vue项目从webpack迁移vite之后后，启动仅需3s

前言

在项目开发中，通常使用git来实现团队协作和版本控制。而我使用git，在公司的笔记本和家里的台式机之间进行"自我协作"，将git用成了代码同步工具。

但最让人担心的是，哪一天写完代码没有push，导致让人头疼的代码冲突，于是我就想：如果有一天有个云端在线的IDE就好了。终于，千呼万唤始出来，豆包MarsCode来了！！

简介

进入豆包MarsCode官网，我们可以看到MarsCode有云端IDE和编程助手两大功能模块。

云端IDE

MarsCode是一个支持多种语言的IDE，例如常见的Java、python、vue以及nodejs等。我们进入IDE之后，点击新建项目，可以选择不同语言模板来创建项目。

在选择语言模板和填入项目名称之后，点击创建新建一个项目并进入IDE。

整个IDE的页面横向分为三个部分。左侧是项目结构，除了一些基本的项目操作之外，也可以通过点击项目名称查看豆包分配资源的使用情况。

中间是代码编辑器，最右侧就是AI助手智能问答对话框。

同时，豆包还支持AI编程的能力，包括：代码补全、代码生成、代码编辑、代码解释、代码注释生成、单元测试生成、智能修复等功能。

AI编程助手

AI编程助手支持上百种编程语言，不仅集成在了豆包IDE中，同时也以插件的形式，赋予VSCode、JetBrains IDEs（例如IntelliJ IDEA）AI编程的能力。

编程助手的主要提供了以下能力：

1. 代码补全：阅读并理解当前代码，然后提供后续代码片段，也支持通过注释生成代码片段。
2. 代码补全 Pro：基于上一次的编辑内容及代码情况，预测下一个改动点并提供推荐代码。
3. 代码生成：理解自然语言并生成所需代码。
4. 代码编辑：编辑指定代码，包括重构、优化、修改部分逻辑等
5. 代码解释：精准解释项目代码，快速上手开发。
6. 代码注释生成：生成函数级注释或更详细的行间注释。
7. 单元测试生成：为指定代码片段生成单元测试。
8. 智能修复：发现代码中的问题并修复。
9. 智能问答：针对研发领域定向优化问答质量，提供更精准的问答结果。

在整个项目开发过程中，对于我来说，用的最多的就是代码补全功能，利用注释生成代码。

这项功能真的为开发者减少了很多代码开发时间，有兴趣的大家可以体验一下。

开发需求

我在之前自学vue生态的时候，写了一个后端管理系统，当时使用的webpack打包工具，每次启动编译都会耗费大量的时间。

所以这借助豆包的AI编程助手的能力，来将webpack迁移到vite上去，并完成后端代码的开发。

导入github项目

豆包支持github导入，如果项目没在github上需要先上传。

我想要导入github上一个名为DataDF的vue项目，现在豆包中点击创建项目。

然后点击授权获取仓库。

输入github的账号和密码，然后选择开放所有仓库，完成授权。

然后就可以看到github上所有的仓库，点击创建，即可拉取代码到豆包中。

这里支持从URL导入项目的方式，但是需要仓库是public。

启动项目

然后启动项目，整个项目已经具备了管理系统大部分的功能。我们现在需要将webpack的代码和配置，修改为适配vite版本后正常运行即可。

【增加文章连接】

vite改造

“遇事不决问春风，编程之事问豆包”。首先咨询一下豆包：如何从webpack迁移到vite。

按照AI助手给出的建议，我们逐步进行操作。

1. 移除webpack，安装vite

首先卸载项目中关于webpack的依赖：

npm uninstall webpack webpack-cli 

在package.json中可以看到webpack相关依赖有webpack、webpack-cli，直接移除即可。

然后安装vite：

npm i -D vite

2.模块别名alias

在整个vue项目中，我们在引入组件和静态文件时，为了避免使用..这样相对路径影响代码的美观程度和阅读性，所以我在webpack中定义一个 @ ，作为相对于src目录的绝对路径。

"@/*": ["src/*"],

这样我在引入组件的时候，使用 @ 表示以src作为起始路径。

但是在vite中，在vite.config.ts中也提供了定义绝对路径的方法，但是我在尝试将@定义src的时候，不支持以@开头的方式，只能以 /@ 开头，所以我就需要在配置中重新定义相对路径。

首先修改tsconfig.json中的路径解析。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "/@/*": ["./src/*"]
    }
  }
}

这里的paths是为了typescript在compile（编译）阶段，能够正确编译各个模块。然后在vite.config.js中添加解析路径（别名），这样在runtime（运行）阶段才能对各个模块进行正确解析。

import path  from 'path'

export default defineConfig({
    resolve: {
        alias: {
            '/@': path.resolve(__dirname, './src'),
        }
    }
}

这样就将原来@映射src，修改为了/@映射/src，但是问题随之而来，那就是要所有代码中引入组件、静态文件路径，由原来的@修改为/@ 。

对于普通的IDE来说，通常只能在单个文件进行查找替换。但是在豆包中，提供了可以全量查找替换所有文件中目标字符的方式。

首先我们点击功能按钮，在Edit找到Replace in Files，也可以使用快捷键Shift+ Ctrl + H。

然后输入要查找的字符串@/。

在西面就会显示所有的搜索结果，接着在replace输入框填入要替换的字符串/@/，点击替换。

如图所示，仅仅几秒钟，就完成了项目所有代码中@/替换/@/的工作。

3. svg插件改造

我定义了一个Icon组件，将Element Icons、本地svg各类图标封装为统一入口。

export default defineComponent(
    {
        name: 'Icon',
        props: {
           // 属性配置
        },
        setup(props) {
            const iconStyle = computed(() => {
                const {size, color} = props
                let s = `${size.replace('px', '')}px`
                return {
                    fontSize: s,
                    color: color,
                }
            })
            // element Plus的图标
            if (props.name.startsWith('el-icon-')) {
                return () => h('el-icon', {
                    class: 'icon el-icon',
                    style: iconStyle.value
                }, [h(resolveComponent(props.name))])
            } else if (props.name.startsWith('local-') || isExternal(props.name)) {
                // 加载本地svg图标
                return () => h(svg, {name: props.name, size: props.size, color: props.color})
            } else {
                return () => h('i', {
                    class: 'icon ' + props.name,
                    style: iconStyle.value
                })
            }
        }

    }
)

Element Icons都是封装好的vue组件，我们只需要在使用vue引入即可使用。

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

app.component('Icon', Icon)
icons = ElementPlusIconsVue as any
for (const i in icons) {
    app.component(`el-icon-${icons[i].name}`, icons[i])
}

而对于本地的svg图标文件而言，我们需要使用webpack的svg-sprite-loader插件，来加载静态的svg文件用作图标。

关于webpack的配置都放在了vue.config.js中，我们要在配置文件里定义插件的匹配规则。

在切换为vite之后，我们依旧需要实现上述功能。AI助手建议使用vite的rollup-plugin-svg插件来实现上述功能，我们根据插件使用手册，实现svg本地图标的加载。

不过在查看代码的时候，会提示代码不规范的问题，这时候使用豆包的AI Fix（AI修复）功能，就会给出修复方案，极大地简化了开发问题的解决流程。

4. 组件路由动态加载改造

整个项目的菜单列表和路由信息都是后台返回，这样的设计可以更好的扩展菜单。

因为还没有开发后台，所以这里的路由信息是写死在前端的。在webpack中构造vue-router路由时，使用import动态引入相应的vue组件。

const routeInfo: RouteRecordRaw = {
    path: path,
    name: routes[idx].name,
    component: () => import(`@/${routes[idx].component}.vue`),
}

但是在vite中，使用这种方式引入会提示不支持，所以我们就使用vite提供的方式，先全量导入所有vue组件。

直接使用豆包的编程助手，在注释中输入我的需求，下面就给出了vite导入的所有vue文件的方式。使用vite的import.meta导入所有的vue组件。

export const addRouteAll = (routes: any, parentName: string) => {
  // 导入所有的vue组件
  const viewsComponent = import.meta.glob('/src/views/**/*.vue')
  for (const idx in routes) {
      const routeInfo: RouteRecordRaw = {
          path: path,
          name: routes[idx].name,
          component: viewsComponent['/src/' + routes[idx].component + '.vue']
      }
      router.addRoute(routeInfo)
   }
}

然后返回一个KV形式的viewsComponent，然后我们根据后台传入的路由信息，拼接出key就获取到了对应的component。

根据控制台打印的viewsComponent，你会发现最终和webpack的import动态引入是一样的。

5. 程序入口改造

在启动webpack项目时，会自动将main.ts作为程序入口，然后从APP节点开始渲染。而在vite中则是以index.html作为入口，所以需要引入main.ts。

6. 配置启动命令

将package.json中webpack的启动脚本命令scripts修改为vite。如果对于启动命令不熟悉的，可以直接通过AI助手生成。

至于命令的名称可以根据自己的开发习惯进行修改，例如我个人习惯于将启动命令定义为serve或者dev。

vite项目测试

在配置好启动命令之后，项目从webpack迁移到vite的改造工作就基本完成，这时候我们可以启动一下，看是否可以正常启动以及观测启动速度。

通过上图可以看到，原本webpack启动需要40s左右，使用vite只需要3s。启动之后，在temimal的右边，就多出了一个Networking，在Networking中，就会出现项目启动协议、端口和url。

在url后面有两个小图标，点击第一个图标可以在豆包内置的浏览器内预览项目。

github同步

这样，整个项目的改造就完成了，修改后的项目提交到github上去，在豆包中需要在Terminal中使用git命令完成commit和push等操作，所以首先配置git环境。

1. 配置提交信息

在Terminal中首先设置提交信息，这样在提交的时候，才能确认request是谁提交的，所以使用下面命令设置信息：

git config --global user.name "aqi"          
git config --global user.email "98675***@qq.com"

2. 配置密钥

然后在Termina使用ssh-kegen生成密钥。

这样密钥就生成完成了，执行cat ~/.ssh/id_rsa.pub打开公钥文件。

拷贝公钥文件的内容，在github的设置中找到SSH and GPG keys。

点击New SSH key，将拷贝的秘钥粘贴到Key中。

3. 测试

然后通过ssh -T git@github.com测试是否已经配置成功。

4. 提交代码

上图表示测试成功，然后执行git commit提交代码，然后push到github远程仓库。

git commit -a -m 'vite version'
git push

执行上面两条命令，完成github的推送。

我们在github的仓库中，也看到了我们的提交信息。

修改后的代码文件也同步到了仓库中。

结语

这就是我使用Marscode豆包IDE，在AI助手、编程助手以及各种丰富功能的帮助下，将vue项目从webpack架构替换成了vite。在整个架构改造过程中，我使用家里的台式机和公司的笔记本共同协作，在云端完成了工作内容。

同时，marscode的UI主题即布局设计符合当下开发者的需求，同时也内置了其他IDE所没有的功能，例如：项目资源（cpu、内存、磁盘）使用情况图形展示、全局项目文件字符替换以及编程助手等。所以在开发过程中遇到问题，不用再去搜索引擎去搜索答案，直接在豆包的AI助手就内部消化了。

豆包真正做到了AI与代码开发的结合，对于开发者的帮助有了一个质的飞跃。所以，有兴趣的同学可以体验一下豆包。