实现 unplugin-auto-import 自定义配置与 Resolver

介绍

unplugin-auto-import 是能够按配置自动按需导入的插件，减少开发时需要不断 import 的问题。

在使用中并不是所有的组件都有提供Resolver，或者我们自己写的公共组件需要自动导入，这时候就需要配置 unplugin-auto-import 插件。

我们以 Ramda 为例。

快捷配置

unplugin-auto-import 提供了很方便的简便配置：

// global imports to register
  imports: [
    // presets
    'vue',
    'vue-router',
    // custom
    {
      '@vueuse/core': [
        // named imports
        'useMouse', // import { useMouse } from '@vueuse/core',
        // alias
        ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
      ],
      'axios': [
        // default imports
        ['default', 'axios'], // import { default as axios } from 'axios',
      ],
      '[package-name]': [
        '[import-names]',
        // alias
        ['[from]', '[alias]'],
      ],
    },
    // example type import
    {
      from: 'vue-router',
      imports: ['RouteLocationRaw'],
      type: true,
    },
  ],

配置时需要先了解转换成最终目标的导入语句是怎样的，Ramda 是这样的：

import * as R form "Ramda"

按配置我们在 imports 处添加对象写自定义规则：

AutoImport({
  imports: [
    'vue',
    // 我们添加的自定义规则
    {
      ramda: [['*', 'R']]
    }
  ],
})

ramda - 对象的 Key，我们 form 的内容，目标语句是 form "Ramda"，所以配置为 ramda 。
[['*', 'R']] - 对象的 Value，我们 import 的内容，目标语句是 import * as R 。因为我们是导出所有并重命名为 R，有两个值，所以这里又是一层数组。

同理就能组装任意的 import 语句，可以将项目中的公共组件、工具函数配置为自动导入。

Resolver

Resolver 当我们需要对外提供的时候不能每次都让用户黏贴配置，万一较为复杂很容易出问题，所以需要提供一个 Resolver，用户只需要引入使用。同时 Resolver 还能提供校验处理的能力。

Resolver 可以直接是一个对象，也可以是一个函数。函数最终返回的值是一个对象，结构如下

{ name: string, from: string, as: string, sideEffects: string }

name 导入的名称，from 导入的路径或者包，as 新的命名名称，sideEffects 如果需要引入其他资源文件的话，比如CSS，可以在这里配置。

转换一下代码，组成如下形式：

export default function RamdaResolve(options = {}) {
  const { name = 'R' } = options
  return (key) => {
    if (key === name) {
      return {
        name: '*',
        from: 'ramda',
        as: name
      }
    }
  }
}

这里需要注意，确定是包里的元素才需要返回，不然组合出来的 import 语句会错乱。

如果我们要单个元素导入也行，改变一下返回值：

export default function RamdaResolve(options = {}) {
  const { prefix = null } = options
  const func = [...] // ramda 提供的函数名

  return (key) => {
    let name = key

    if (prefix) {
      if (!name.startsWith(prefix)) return
      name = name.substring(prefix.length)
    }

    if (alias[key]) name = alias[key]
    if (!func.includes(name)) return

    return {
      name,
      from: 'ramda'
    }
  }
}

到此，一个简单的 Resolver 完成了。