IT博客汇 | 自动化按需导入组件库的工具rust版本完成开源了

自动化按需导入组件库的工具rust版本完成开源了

夕水发表于 2025-05-08 16:15:57

背景

当我为每个Vue项目使用ui组件库的时候，都会使用按需导入的方式来使用ui组件库。但是每次按需导入，不可避免的就需要做以下三步。我们以element plus ui组件库为例。

1. 安装依赖

第一步，当然是需要安装依赖。命令如下:

pnpm add unplugin-vue-components unplugin-auto-import // npm和yarn同理

2. 添加vite配置

第二步，就是往vite的配置里面添加配置，如下所示:

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3. 修改ts配置

第三步，就是写入ts的配置，如下所示:

{
     "include": ["components.d.ts", "auto-imports.d.ts"]
}

虽然说这三步实际也花费不了多少时间，但是每个项目都这么做，那不是太费时间了吗？这个工具的出现就是为了解决这个问题。

有了这个工具，我们只需要一个命令就可以完成以上三个步骤。如下所示:

// 当然前提需要安装这个工具
ew-auto-import-tool --library element-plus

rust版本的出现

在这之前，我也将这个工具发布了一个npm包，并且也写了一篇介绍使用文章。

这个版本的工具源码是使用typescript编写的，为了提升性能和加快编译效率，我特意又花时间完成了rust版本。

让我们一起来看看rust版本是如何使用这个工具更高效的完成按需导入的自动化吧。

编写一个sh脚本，代码如下所示:

#!/bin/bash

# 颜色定义
GREEN="\033[0;32m"
BLUE="\033[0;34m"
YELLOW="\033[0;33m"
RED="\033[0;31m"
NC="\033[0m" # No Color

# 打印带颜色的消息
function print_message() {
  echo -e "${BLUE}===> ${1}${NC}"
}

# 检查命令是否存在
function check_command() {
  if ! command -v $1 &> /dev/null; then
    echo -e "${RED}错误: $1 未安装，请先安装它。${NC}"
    exit 1
  fi
}

# 检查必要的命令
check_command "cargo"
check_command "npm"

# 设置工作目录
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
RUST_DIR="$(dirname "$SCRIPT_DIR")"
EXAMPLE_PROJECT="my-vue-app"
EXAMPLE_DIR="$SCRIPT_DIR/$EXAMPLE_PROJECT"

print_message "开始运行 Auto Import Tool 示例"

# 编译 Rust 工具
print_message "编译 Rust 工具"
cd "$RUST_DIR"
cargo build --release
if [ $? -ne 0 ]; then
  echo -e "${RED}编译失败，请检查错误信息。${NC}"
  exit 1
fi
echo -e "${GREEN}编译成功!${NC}"

# 创建示例 Vue 项目
print_message "创建示例 Vue 项目"
cd "$SCRIPT_DIR"

# 如果项目已存在，询问是否删除
if [ -d "$EXAMPLE_PROJECT" ]; then
  echo -e "${YELLOW}警告: $EXAMPLE_PROJECT 目录已存在。${NC}"
  read -p "是否删除并重新创建? (y/n) " -n 1 -r
  echo
  if [[ $REPLY =~ ^[Yy]$ ]]; then
    rm -rf "$EXAMPLE_PROJECT"
  else
    echo -e "${YELLOW}使用现有项目继续。${NC}"
  fi
fi

# 如果项目不存在，创建新项目
if [ ! -d "$EXAMPLE_PROJECT" ]; then
  echo -e "${GREEN}创建新的 Vue + TypeScript 项目...${NC}"
  npm create vite@latest $EXAMPLE_PROJECT -- --template vue-ts
  cd "$EXAMPLE_PROJECT"
  npm install
else
  cd "$EXAMPLE_PROJECT"
fi

# 运行 Auto Import Tool
print_message "运行 Auto Import Tool 配置 Element Plus"
TOOL_PATH="$RUST_DIR/target/release/ew-auto-import-tool"

echo -e "${YELLOW}选择运行模式:${NC}"
echo "1) 自动模式 (使用 Element Plus)"
echo "2) 交互模式 (手动选择组件库)"
read -p "请选择 (1/2): " -n 1 -r
echo

if [[ $REPLY =~ ^[1]$ ]]; then
  "$TOOL_PATH" --library element-plus --path "$EXAMPLE_DIR"
else
  "$TOOL_PATH" --path "$EXAMPLE_DIR"
fi

# 创建示例组件
if [ $? -eq 0 ]; then
  print_message "创建示例组件以验证配置"
  
  # 创建一个使用组件库的示例组件
  cat > "$EXAMPLE_DIR/src/App.vue" << EOL
<template>
  <div class="container">
    <h1>Element Plus 自动导入示例</h1>
    <div class="card">
      <el-form>
        <el-form-item label="用户名">
          <el-input v-model="username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">登录</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'


const username = ref('')
const password = ref('')

const handleSubmit = () => {
  if (!username.value || !password.value) {
    ElMessage.warning('请输入用户名和密码')
    return
  }
  ElMessage.success('登录成功!')
}
</script>

<style>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
EOL

  print_message "示例创建完成"
  echo -e "${GREEN}现在你可以运行项目来测试自动导入功能:${NC}"
  echo -e "cd $EXAMPLE_PROJECT && npm run dev"
fi

print_message "示例运行完成"

整个脚本代码的核心就是使用cargo build --release命令编译出工具的可执行文件，然后初始化一个vue项目并执行该可执行文件，这样就完成了一个示例。

使用步骤

前提条件

已安装 Rust 和 Cargo
已编译 Auto Import Tool 的 Rust 版本

使用方法

1. 编译工具

在 rust 目录下运行以下命令编译工具：

cargo build --release

编译后的可执行文件将位于 target/release 目录下。

2. 创建一个 Vue 项目

使用 Vite 创建一个新的 Vue 项目：

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install

3. 使用工具配置组件库

运行编译后的工具，并指定要配置的组件库和项目路径：

# 使用相对路径运行工具
../target/release/ew-auto-import-tool --library element-plus --path ./my-vue-app

或者使用交互式方式：

../target/release/ew-auto-import-tool --path ./my-vue-app

然后按照提示选择要配置的组件库。

如果觉得本工具有用，感谢大家使用，点赞收藏不迷路，点个小star吧，工具源码地址在这里。

感兴趣的可以看看源码，后期我再写文章详细讲解源码的实现，今天就到此为止，谢谢大家阅读。

ps: 文章由trae编写完成，本人扩充修改了一下。