javascript - vite打包疑问?

Question

现在遇到个这么个需求，就是项目用的vite的打包工具

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

Answer 1

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

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

Answer 2

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

1. 首先，你需要在你的项目中创建一个新的Vite插件，这个插件将负责在构建时将你的组件打包成一个单独的JS文件。你可以使用Vite插件API来实现这个功能。在这个插件中，你可以创建一个新的HTML文件，引入你的组件库JS文件，然后将这个HTML文件包含在你的主HTML文件中。
2. 在你的 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'),       },    },  },})

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

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

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

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

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