如何给 unplugin-vue-components/vite 写一个简单的 resolver

大部分工作 unplugin-vue-components 都已经处理好了, 我们只需要接收组件名来判断是否是自己的组件, 然后处理对应的导入逻辑。

一共 3 个字段

• as 重命名类似 import { componentNameReName } from ‘xxxx’
• name 组件名 import { componentName } from ‘xxxx’
• from 导入路径, 此处你可以根据自己需要来处理对应的路径
• sideEffects 此处字段是一个数组, 中文意思是副作用，可以理解为组件的其他附加文件。 比如你需要导入一个 button 组件, 但是又需要导入他的 css 文件, 此时就可以使用这个字段了。

demo

export default (componentName) => {
  if (componentName.startsWith('U')) {
    const name = convertCamelCaseToDash(componentName)
    return { as: componentName, from: `uview-plus/components/${name}/${name}.vue` }
  }
}

function convertCamelCaseToDash(str: string) {
  return str.replace(/([A-Z])/g, (match, letter, index) =>
    index === 0 ? letter.toLowerCase() : `-${letter.toLowerCase()}`)
}

文档