feat: 支持间接引用组件

[F-loat]

初步实现了通过 js 文件间接引用 vue 组件，可能需要进一步测试，目前应该要求 js 文件和 vue 文件位于同一目录中才行

import newsItem from './news-item'
import topicItem from './topic-item'

export {
  newsItem,
  topicItem
}

import { newsItem } from '@/components'

export default {
  components: {
    newsItem
  }
}

[F-loat]

嗯，不同目录的话会因为文件路径不同导致 hash 值改变，应该也能解决，但是改动估计会多一点了。。

[steinslin]

会有些问题吧，即使是同目录，不能把组件名当做文件名

[F-loat]

目前这个同目录是没问题的，组件名涉及了好几个函数，但是总的来说是维护了一个文件路径和组件名的关联对象，文件路径存在就返回组件名，不存在就生成一个新的 hash 值加到文件名后面

[steinslin]

// index.js
import button from './button.vue'
export default button

// main.js
import XButton from './index.js'

比如这样，会出问题

[F-loat]

我这边试了下是没问题的，用我那个 it之家 的项目测的

// src/components/index.js
import newsItem from './news-item'
export default newsItem

// src/pages/news/list.vue
import newsItem from '@/components'

[steinslin]

你那个newsItem的文件名改成别的就出问题，不要news-item.vue

[F-loat]

确实，晚点我再看看有没有别的方式可以实现

[F-loat]

应该完整支持各种引用方式了

[steinslin]

这个地方感觉是不是应该这样写

resolveRealComSrc(realComSrc, exportsMap[m], resolveFn).then(resolve).catch(reject)

[F-loat]

嗯，直接 resolve 也行，错误处理我在第一次调用时加一下，这样会有问题不

function resolveSrc (originComponents, components, resolveFn, context) {
  return Promise.all(Object.keys(originComponents).map(k => {
    return new Promise((resolve, reject) => {
      resolveFn(context, originComponents[k].src, (err, realSrc) => {
        if (err) return reject(err)
        const com = covertCCVar(k)
        resolveRealComSrc(realSrc, originComponents[k].module, resolveFn).then(realComSrc => {
          const comName = getCompNameBySrc(realComSrc)
          components[com] = { src: comName, name: comName }
          resolve()
        }).catch(reject)
      })
    })
  }))
}

[F-loat]

都加了一下，直接 resolve 好像处理不到错误

[F-loat]

关联问题：
Meituan-Dianping/mpvue#601
Meituan-Dianping/mpvue#506
Meituan-Dianping/mpvue#115

[anchengjian]

引一个中间 JS 的目的只是做一个索引？如果是这样，这么玩可以解决一些场景下的问题，但如果是对引用来的 vue 组件有一些操作，那这就就跪了

[F-loat]

一般其实就是索引，为了引用方便，没遇到过做额外处理的情况

[limichange]

🤔 mpvue引用组件的确实有些问题，虽然js里显示组件是正常的，但实际执行中会报错。