Vue3 / Vite：如何打包组件发布到 npm

Question

我正在尝试使用 Vite 和 TypeScript 在 npm 上的 public 包中导出两个 Web 组件。

Vite 有一个图书馆模式 (https://vitejs.dev/guide/build.html#library-mode)，效果很好。 ESM 和 UMD 文件都被转译到我的 /dist 目录中。我的问题是如何导出入口点文件中的网络组件。

我有一个名为 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

（在 node_module 中找不到 AwesomeHeader 和 AwesomeFooter 作为导出，即使 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"
    },
}

Answer 1

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

export { AwesomeHeader, AwesomeFooter } 在 export.js 中有效。

关于导出的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

并且您不能破坏默认导出：

Vue3 / Vite：如何打包组件发布到 npm

Vue3 / Vite: How to package components for publishing on npm

vue.js

vuejs3

npm-publish

vite