解放重复的引入，使用unplugin-auto-import导入自定义hooks

背景

最近在做nuxt的个人项目，感觉他可以自动导入自定义的hooks很省事。 公司的项目用的是vue2.7版本，一些封装的hook总是得手动引入，所以尝试一下在公司的项目做这个优化。

优化步骤

安装unplugin-auto-import

公司项目用的是rspack，所以需要安装下面的版本：

pnpm i unplugin-auto-import/rspack

引入

// rspack.config.js
const AutoImport = require('unplugin-auto-import/rspack')

modules.exports = {
     plugins: [
         ...,
            AutoImport({
                dirs: [
                    resolve('src/hooks'), // 自动导入 hooks 文件夹中的所有导出
                    resolve('src/controller/composition.js')
                ],
                dts: resolve('src/auto-imports.d.ts'), // 生成类型声明文件
                eslintrc: {
                    enabled: true, // 生成 ESLint 配置文件
                    filepath: resolve('.eslintrc-auto-import.json'),
                    globalsPropValue: true,
                },
            })
    ]
}

修改eslint文件

// .eslintrc.js
const autoImportGlobals = require('./src/.eslintrc-auto-import.json')
module.exports = {
	globals: {
        // value 为 true 允许被重写，为 false 不允许被重写
        NODE_ENV: false,
        withDefaults: true,
        defineExpose: true,
        defineEmits: true,
        defineProps: true,
        $: true,
        ...autoImportGlobals.globals
    }
}