函数名称在 vite 全局导入的生产版本中不可用

Question

我正在使用 vite 全局导入功能在 vue 3 应用程序的 globalProperties 中注册一些函数，以在

main.ts

中实现全局 $filters 数组。

它在开发期间可以正常工作，但在生产构建之后

func.name

始终是空字符串并且不包含函数名称。

Object.values(import.meta.glob<Function[]>('./common/filters/*.filter.ts', 
{ eager: true, import: 'default' }))
  .forEach(filters => filters.forEach(func => app.config.globalProperties.$filters[func.name] = func))

app.mount('#app')

currency.filter.ts

const filters: Function[] = [
  function currency(value: string) {
    if (!value)
      return value

    return `${value.toLocaleString()}$`
  },
]
export default filters

最后我可以在 vue 组件中使用它们，比如 vue 2 中的过滤器：

{{ $filters.currency(item.price) }}

如何解决这个问题，或者是否有更好的方法来导入目录中文件内的所有函数并在 globalProperties 中注册

开发中

app.config.globalProperties.$filters

的

控制台日志：

{
   currency: ƒ currency(value)
   length:1
   name:"currency"
}

Answer 1

这是因为Vite将代码编译为ES5，函数名称为ES6功能。我设法使用此代码解决了这个问题：

function functionName(fun: any) {
  let ret = fun.toString()
  ret = ret.substr('function '.length)
  ret = ret.substr(0, ret.indexOf('('))
  return ret
}

Object.values(values)
  .forEach(filters => filters.forEach((func) => { return app.config.globalProperties.$filters[functionName(func)] = func }))