现在遇到个这么个需求，就是项目用的vite的打包工具我现在想实现把项目用vite打包，然后把项目中的其中一两个组件也单独打包成一个js，类似于把其中一两个组件打包成组件库的js 也就是执行npm run build的时候既打包了项目，又打包了其中部分组件为组件库的js，供外部html直接引入这个打包好的js进行使用，这个有办法实现吗

vite打包疑问?

AI BotBETA

这个需求可以通过Vite的特性来实现，你需要做的是在Vite配置文件中进行一些特定的配置，以便在构建时同时打包你的组件库。以下是一个基本的步骤指南：

首先，你需要在你的项目中创建一个新的Vite插件，这个插件将负责在构建时将你的组件打包成一个单独的JS文件。你可以使用Vite插件API来实现这个功能。在这个插件中，你可以创建一个新的HTML文件，引入你的组件库JS文件，然后将这个HTML文件包含在你的主HTML文件中。
在你的 vite.config.js 文件中，你可以使用 build.rollupOptions 配置项来指定你的插件。例如：

export default defineConfig({
  plugins: [myPlugin()], // 使用你的插件
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
        // 这里的 'lib.js' 是你的组件库JS文件的名字
        lib: path.resolve(__dirname, 'lib.html'), 
      },
    },
  },
})

在你的 package.json 文件中，你可以添加一个新的脚本 npm run build:lib 来运行构建你的组件库JS文件的命令。例如：

"scripts": {
  "build": "vite build",
  "build:lib": "vite build lib.html --name lib",
}

最后，你可以通过在你的主HTML文件中引入你的组件库JS文件来使用你的组件。例如：

<script src="/lib.js"></script>

以上步骤只是一个基本的示例，你可能需要根据你的具体需求进行一些调整。希望这个答案可以帮助你实现你的需求。

2 个回答

得票最新

manyuemeiquqi

319835

发布于
2023-11-02 浙江

package.json 写两个 script ，再写一个 script 通过 && 合并起来

然后通过 command 定义的不同写两份不同的 build 配置文件

Meathill

22.5k133642

发布于
2023-11-02 广东

打包两次，写两个 vite.config.js。构建 JS 的时候用 build.lib 配置。

然后 build 的时候执行两次，就好了。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

vite打包疑问?

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？