Vue3 Composables in NPM Package

huangapple go评论71阅读模式
英文:

Vue3 Composables in NPM Package

问题

我正在尝试制作一个NPM包,用于共享一些Vue3组件。我有以下代码来注册组件本身。

import components from "./components/components";

const plugin = {
install (Vue) {
for (const prop in components) {
if (components.hasOwnProperty(prop)) {
const component = components[prop]
Vue.component(component.name, component)
}
}

}
}


但我还有一些函数(composables),我也想使其可用。正确的做法是什么?是否有类似于组件安装的设置?

谢谢
英文:

I am attempting to make an NPM Package to share some Vue3 Components. I have the following to register the components themselves.

import components from "./components/components";

const plugin = {
  install (Vue) {
    for (const prop in components) {
      if (components.hasOwnProperty(prop)) {
        const component = components[prop]
        Vue.component(component.name, component)
      }
    }
    
  }
}

But I also have some functions (composables) that I would like to make available as well. What is the correct way to do this? Is there a similar setup to the component install?

Thanks

答案1

得分: 1

Composable 只是 JavaScript 函数。您可以将它们从文件中导出,并通过 package.json 中的 exports 键来提供该文件。

这里有一个示例来自 VueUse

 "exports": {
    ".": {
      "types": "./index.d.ts",
      "require": "./index.cjs",
      "import": "./index.mjs"
    },
    "./*": "./*",
    "./metadata": {
      "types": "./metadata.d.ts",
      "require": "./metadata.cjs",
      "import": "./metadata.mjs"
    }
  },
英文:

Composable are just JavaScript functions. You can export them from a file and make the file available through exports key in package.json.

Here an example taken from from VueUse

 "exports": {
    ".": {
      "types": "./index.d.ts",
      "require": "./index.cjs",
      "import": "./index.mjs"
    },
    "./*": "./*",
    "./metadata": {
      "types": "./metadata.d.ts",
      "require": "./metadata.cjs",
      "import": "./metadata.mjs"
    }
  },

huangapple
  • 本文由 发表于 2023年3月21日 01:40:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/75793560.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定