如何将类型添加到 Vite 库构建中?

2024-05-16

我按照vite文档使用图书馆模式 https://vitejs.dev/guide/build.html#library-mode我能够生成一个工作组件库。
我创建了该项目vue-ts预设,在我的组件中,我定义了道具及其类型,并使用了一些接口。但是当我构建库时,没有包含任何类型。

如何为最终构建添加类型,无论是自动从组件推断还是使用定义文件手动推断?

更多信息以下是有关我的文件的更多信息:
tsconfig.json

{
  "name": "@mneelansh/test-lib",
  "private": false,
  "version": "0.0.2",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "emitDeclarationOnly": true, // testing
  "declaration": true, // testing
  "main": "./dist/lib.umd.js",
  "module": "./dist/lib.es.js",
  "types": "./dist/main.d.ts",
  "exports": {
    ".": {
      "import": "./dist/lib.es.js",
      "require": "./dist/lib.umd.js"
    },
    "./dist/style.css": "./dist/style.css"
  },
  "files": [
    "dist"
  ],
  "dependencies": {
    "@types/node": "^17.0.25",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "typescript": "^4.5.4",
    "vite": "^2.9.5",
    "vue-tsc": "^0.34.7"
  }
}

我添加了emitDeclarationOnly and declaration属性,但这没有帮助。

My vite.config.ts:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const path = require("path");

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "Button",
      fileName: (format) => `lib.${format}.js`,
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
  plugins: [vue()],
});


您可以使用vite-plugin-dts https://github.com/qmhc/vite-plugin-dts

import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [
    dts({
      insertTypesEntry: true,
    }),
  ],
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将类型添加到 Vite 库构建中? 的相关文章

  • JavaScript(或 jQuery)中有“有焦点”吗?

    我可以这样做吗 也许通过插件 if form contact input hasFocus form contact input first focus 基本上 将焦点设置为第一个输入 但前提是用户尚未单击任何内容 我知道这也行 但是还有更
  • { ...obj1, obj2 } 到底做什么[重复]

    这个问题在这里已经有答案了 假设我们有两个对象 const state fishes some obj data animals some obj data const animals some NEW data 在Vuex中有一个方法re
  • 如何在 HTML 链接中使用 JavaScript 变量

    我正在开发的网站有一个标签指向与网站所具有的 URL 不同的 URL 我想做的是绕过使用下面的 trueURL 标记来查找网页的网址 因为我需要它来构造一些内部锚点 因为我需要网站的实际网址 以便内部锚点正常工作 我遇到的问题是我不知道应该
  • 将全局样式表与故事书和角度结合使用 - SassError:SassError:预期“{”

    几天来 我一直在尝试将全局样式表集成到故事书中 我已经从 sass 支持文档中集成了 webpackFinal 配置 在 storybook 目录中 我创建了一个 scss loader scss 文件 该文件应该加载全局样式表 在 pre
  • 使用 Nestjs 和 typeorm 保存实体的审核

    我有一个实体Audit就像下面在 Nestjs 应用程序中使用 typeorm for mongodb 一样 Entity export class Audit Column createdBy string BeforeInsert se
  • 隐藏加载失败的图片

    我有一个 Android 应用程序 它生成一些在本地 Webkit 视图中呈现的 HTML HTML 生成的细节实际上并不那么重要 除了 大部分来自一个地方 我无法改变它 HTML 周围的模板 包括页眉 页脚 HEAD 等 CSS 和 Ja
  • jQuery:当使用 on .scroll 事件和警报时,firefox 似乎无限循环

    我的主模板之一中有以下 jQuery 代码 document scroll function var scroll top document scrollTop alert scroll top if scroll top lt 70 fi
  • 如何防止字段的角度自动修剪?

    有没有什么方法可以防止整个应用程序中字段的角度自动修剪 我知道我可以使用 ngTrim 指令防止指定字段出现这种情况 但将此指令添加到应用程序中的所有文本字段看起来不太好 有什么方法可以对 Angular 模块中的所有字段执行此操作吗 这是
  • 使用jquery,下拉列表选择更改时如何重定向?

    我有一个下拉列表 如果有人选择一个选项 我想根据选择重定向到另一个页面 我怎样才能通过 jquery 做到这一点 将逻辑绑定到 change 事件 并从中获取当前值 val 以确定用户应该被重定向到哪里 此示例假设位置直接存储在值本身中 m
  • IE9:奇怪的 JavaScript 错误

    我尝试在网站中显示 Google DFP 广告横幅时遇到错误 这些广告在除 IE9 之外的所有浏览器中展示 您可以在此处查看带有横幅的简单测试页面 离线演示 错误是 抛出异常但未捕获 google ads js 第 34 行字符 474 I
  • 在 Angular 2+ 中进行 DOM 操作的正确方法

    我知道有一些类似的问题 但没有人回答我的问题 基本上 以角度方式操作 DOM 的正确方法是什么 比如说我有这个 html
  • Jquery 选择器中的冒号

    我最近将 jquery 从 1 4 更新到 2 1 并开始出现错误 在我的代码中 我有一部分通过 id 选择元素 jQuery id name 这会产生一个错误 但是之前没有错误 1 4 如果我转义冒号 错误就会消失 他们在最新版本中添加了
  • AngularJS:如何缓存从 $http 调用返回的 json 数据?

    如何缓存从 http 调用返回的 json 数据 我使用以下风格的 http 调用 http url SomeWebMethodUrl method POST data query somevalue headers Content Typ
  • 如何从 HTML 图表中删除网址 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在 HTML 中创建一个图表 我正在使用 API amCharts 但问题是它在图表中显示文本 amchart 我怎样才能删除该文本
  • 从 Web 浏览器控件读取 Javascript 变量

    我正在尝试读取从表单上的 WebBrowser 控件加载和调用的 Javascript 变量的值 Example index html 引用名为 test js 的 javascript 在 test js 上 创建并填充了几个变量 然后i
  • 样式表何时添加到 document.styleSheets

    我正在尝试使用 javascript 动态添加 css 样式表规则 例如示例 2here https developer mozilla org en DOM CSSStyleSheet insertRule 它在大多数情况下都有效 但似乎
  • 是否有跨浏览器的 jQuery contentEditable 库? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个 jQuery 插件 库 它可以使 contentEditable 属性在所有主要浏览器中正常工作 我什至可以不用 IE6
  • JSON 数据的动态表单(不同类型)

    我尝试使用 JSON 中的数据在 AngularJS 中创建动态表单 我有这个工作 HTML p p
  • 返回语句后的声明

    function f return f1 function f1 return 5 f returns 5 为什么这有效 之后声明局部函数有什么好处return 这是好的做法吗 它之所以有效 是因为函数声明都是由解释器在第一次传递时评估的
  • 理解“窗口”对象[重复]

    这个问题在这里已经有答案了 可能的重复 JS 窗口全局对象 https stackoverflow com questions 10035771 js window global object 如何window对象工作 我知道它是顶级对象并

随机推荐