模块自动导入工具 unplugin-auto-import

今天介绍一款开发时能自动导入模块的工具，他就是 unplugin-auto-import 。 以Vue2为例。

安装如下：

npm i -D unplugin-auto-import

然后进入页面在更目录下面创建一个vue.config.js文件。

打开vue.config.js文件之后添加一个自动引入axios，代码如下写：

const VueComponents = require('unplugin-vue-components/webpack');


module.exports = {
  configureWebpack: {
    imports:["axios"]
  },
}

如果是vite 就把unplugin-vue-components/webpack 改为unplugin-vue-components/vite ,他是有提示的。下面是官方给的案例。

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({ /* options */ }),
  ],
})


// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack')({ /* options */ }),
  ],
}



// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-auto-import/webpack')({ /* options */ }),
    ],
  },
}


/ rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup'

export default {
  plugins: [
    AutoImport({ /* options */ }),
    // other plugins
  ],
}


/ rspack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/rspack')({ /* options */ }),
  ],
}


/ quasar.conf.js [Vite]
module.exports = {
  vitePlugins: [
    ['unplugin-auto-import/vite', { /* options */ }],
  ],
}

// quasar.conf.js [Webpack]
const AutoImportPlugin = require('unplugin-auto-import/webpack')

module.exports = {
  build: {
    chainWebpack(chain) {
      chain.plugin('unplugin-auto-import').use(
        AutoImportPlugin({ /* options */ }),
      )
    },
  },
}

// esbuild.config.js
import { build } from 'esbuild'

build({
  /* ... */
  plugins: [
    require('unplugin-auto-import/esbuild')({
      /* options */
    }),
  ],
})


// astro.config.mjs
import AutoImport from 'unplugin-auto-import/astro'

export default defineConfig({
  integrations: [
    AutoImport({
      /* options */
    })
  ],
})

网址：https://github.com/unplugin/unplugin-auto-import#install

然后我们页面的axios就可以删除掉了，不需要引入。

然后介绍一下这个插件的几个属性

1. include:

   • 用途：指定哪些文件或目录应被插件处理。
   • 场景：当你只想在特定的目录或文件中自动导入组件时使用，例如只处理 src/views 或仅处理匹配 *.vue 的文件。

2. imports:

   • 用途：手动指定要自动导入的库或模块。
   • 场景：例如，你可以指定 element-ui，这样当你在模板中使用 <el-button>，插件会自动为你导入对应的组件。

3. dirs:

   • 用途：指定哪些目录下的 Vue 组件应该被自动解析和导入。
   • 场景：在你有一个 src/components 目录，其中包含所有的 Vue 组件，并希望所有这些组件都能自动导入的情况下使用。

4. dts:

   • 用途：为自动导入的组件生成 TypeScript 定义文件。
   • 场景：当你在使用 TypeScript，并希望为自动导入的组件获得类型提示和校验时使用。只有用到TS就一定需要这个。

5. resolvers:

   • 用途：定义自定义的解析器或使用插件提供的预设解析器来确定如何解析组件名称和它们的导入路径。
   • 场景：例如，当你使用第三方 UI 库，如 Vant，并希望自动导入它的组件时，可以使用 VantResolver。

6. eslintrc:

   • 用途：这不是 unplugin-vue-components 的直接配置项。但在使用此插件时，由于组件是自动导入的，你可能需要更新 ESLint 配置以防止“未定义”或“未使用”等错误。
   • 场景：例如，使用 eslint-plugin-import 插件的 no-unresolved 规则可能会对自动导入的组件报错。你可能需要调整或禁用某些 ESLint 规则来适应自动导入的行为

以上就是unplugin-auto-import插件使用了，更多请去官方文档查看。github地址:https://github.com/unplugin/unplugin-auto-import#install