文章/答案/技术大牛

发布

社区首页 >问答首页 >Vue3 / Vite:如何封装在npm上发布的组件

问Vue3 / Vite:如何封装在npm上发布的组件
EN

Stack Overflow用户

提问于 2021-05-20 08:37:42

回答 1查看 3.4K关注 0票数 7

我试图在npm上的一个公共包中导出两个web组件，使用Vite和TypeScript。

Vite有一个运行良好的库模式(https://vitejs.dev/guide/build.html#library-mode)。ESM和UMD文件都被转移到我的/dist目录中。我的问题是如何导出入口点文件中的web组件。

我有一个名为export.js的入口文件

import AwesomeHeader from './components/AwesomeHeader.vue'
import AwesomeFooter from './components/AwesomeFooter.vue'

export default { // I feel like the problem is here.
    components: {
        AwesomeHeader: AwesomeHeader,
        AwesomeFooter: AwesomeFooter,
    }
}

我的想法是，我将npm publish这个项目并像这样使用它。

npm i @sparkyspider/awesome-components #(ficticious example)

import {AwesomeHeader, AwesomeFooter} from '@sparkyspider/awesome-components' // does not find

(AwesomeHeader和AwesomeFooter在node_module中不作为导出找到，即使引用/找到了JavaScript文件)

下面是我的package.json：

{
    "name": "@sparkyspider/awesome-components",
    "version": "1.0.8",
    "files": [
        "dist"
    ],
    "main": "./dist/awesome-components.umd.js",
    "module": "./dist/awesome-components.es.js",
    "exports": {
        ".": {
            "import": "./dist/awesome-components.es.js",
            "require": "./dist/awesome-components.umd.js"
        }
    },
    "scripts": {
        "dev": "vite",
        "build": "vue-tsc --noEmit && vite build",
        "serve": "vite preview"
    },
    "dependencies": {
        "vue": "^3.0.5"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^1.2.2",
        "@vue/compiler-sfc": "^3.0.5",
        "typescript": "^4.1.3",
        "vite": "^2.3.3",
        "vue-tsc": "^0.0.24"
    },
}

vue.js

vuejs3

npm-publish

vite

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-20 11:01:49

您将对象{ component: ... }作为默认导出，而不是导出要导入的AwesomeHeader和AwesomeFooter。

export { AwesomeHeader, AwesomeFooter } in export.js将有效。

而且您无法销毁默认导出：https://stackoverflow.com/a/43987935/8810271

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67616851

复制

相似问题

问Vue3 / Vite:如何封装在npm上发布的组件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue3 / Vite:如何封装在npm上发布的组件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue3 / Vite:如何封装在npm上发布的组件
EN