typescript - 如何使用 vue-class-component 构建 es6 vue-component 库

Question

我正在尝试使用具有以下要求的 vue-class-component 和 vue-property-decorator 在 typescript 中创建一个 vuejs 组件库：

• 库组件应该用类风格的打字稿编写。
• 库组件应导出为 es6 模块以允许在项目中进行 treeshaking。

对于库，我使用了最新版本的 @vue/cli 来搭建项目。在那个库项目中，组件工作得很好。

另一方面，应用程序正在使用 webpack-setup，在这里我想使用 vue-components。

通常当我想在 es6 中构建基于 typescript 的库时，我使用 tsc 将 ts-files 转换为 es6 js-files。但是按照这种方法，组件不知道模板。有没有办法将 tsc 与 vue-template-compiler 结合起来？

我找到了另一种方法来完成这项工作，但我对这种方法一点也不满意：

我使用"vue-cli-service build --target lib --name vue-lib ./src/index.ts" 这种方式 vue-cli-service 将创建一个 umd-bundle 和 commonjs-bundle，如此处文档中所述。在项目中，我可以使用带有上述//@ts-ignore语句的组件。所以我丢失了声明并且组件不在 es6 语法中：/

为了更好地理解我遇到的问题，我在 github 上创建了一个最小示例，您可以在此处找到：

库： https ://github.com/Sh4bbY/vue-lib

应用： https ://github.com/Sh4bbY/vue-project

标签： typescriptvue.jsvuejs2vue-componentvue-class-components