4

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

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"
    },
}
4

1 回答 1

3

您将 object{ component: ... }作为默认导出，而不是您尝试导入的导出AwesomeHeaderand 。AwesomeFooter

export { AwesomeHeader, AwesomeFooter }在export.js将工作。

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

而且你不能破坏默认导出：https ://stackoverflow.com/a/43987935/8810271

于 2021-05-20T11:01:49.253 回答