2025年使用vite打包libary模式打包sdk

科技前沿 • 2025-03-29 13:18 • 阅读 53

大家好，我是讯享网，很高兴认识大家。

1.在想要创建sdk的地方:

yarn create vite yourlibName

讯享网

在这里插入图片描述
讯享网
输入指令.生成lib包框架(sdk)

2.Select a framework: Other

3.选择完other后 Select a variant:有两个选项: create-vite-exxtra和create-electron-vite

对于打包 Library 的情况，你应该选择 create-vite-extra 选项。这个选项是一个用于打包 Library 的 Vite 插件，可以帮助你更方便地打包和发布你的库。

create-vite-extra 是一个 Vite 插件，它提供了一些额外的功能和配置，特别适用于构建 Library。它可以帮助你生成不同格式的库文件，如 ES Module (ESM)、CommonJS (CJS) 和 UMD，以便在不同的环境中使用。此外，它还支持 Tree Shaking，使得最终构建的库文件只包含实际使用到的代码，减小了文件体积。

create-electron-vite 是用于构建 Electron 应用程序的 Vite 插件。如果你打算构建一个 Electron 应用程序而不是一个 Library，那么你可以选择这个选项。它提供了 Electron 相关的功能和配置，方便你开发和构建 Electron 应用。

所以，如果你的目标是打包 Library，那么请选择 create-vite-extra 选项。然后根据之前提到的，在 vite.config.js 中配置 build.lib 选项，以及其他你需要的库的配置。

4.选择创建新项目的模板

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bvTdZlzu-1690946249142)(C:%5CUsers%5CAcer%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20230802091954754.png)]

5.最后选择js或者ts

就生成了一个简单的libary包.可做sdk
在这里插入图片描述

使用

在这里插入图片描述

接下来我自定义一个utils.js文件,里面自定义几个方法,然后统一在lib/main.js中引入,统一导出
在这里插入图片描述

在index.html中直接引入打包后的文件:

这里直接运行在浏览器会报错,因为浏览器默认不允许访问本地的文件,我们可以下载插件:Live server 或者弄一个开发浏览器(去除跨域限制,辅助我们开发使用) 使用live serve后:
在这里插入图片描述
可以在浏览器控制台看到::

使用这个方法:;

讯享网<script type="module"> import lib from '/dist/counter.js' console.log(lib.jia(1, 2)); </script>

在这里插入图片描述
这里就成功使用了我们所自己封装并打包的方法了,给别人使用可以选择发布到npm或者直接把打包好的js文件发送给对方引入即可.

谷歌关闭跨域限制.(生成一个开发浏览器)，Chrome关闭跨域