Library configuration preset

[altitudems]

Is your feature request related to a problem? Please describe.
Vite currently assumes we are building an app. This is great and seems to allow for opinionated/zero config. However this doesn't seem to be the best thing if the intent is to create a library in the end.

Describe the solution you'd like
It would be amazing to have a configuration preset for building out libraries instead of apps.

Describe alternatives you've considered
Alternatively we could just use different build tooling for non-apps. @pika/pack comes to mind.

Additional context
This idea seems to support some of the requests from #321 and #329.

[m4rvr]

Some ideas:
Separate preset option in the config app | library where app is the default.

For the library you actually don't need a separate assets folder nor an index.html because everything is in the dist folder, right? So we could drop the options for the library preset.

Instead of only one UserConfig we could need two - UserAppConfig & UserLibraryConfig so the types work correctly.

[ShenQingchuan]

Maybe it's not the best time to build a UI Components Library with Vite & Vue3?

I would really like to do it, focusing on this issue's progress

[FateRiddle]

Is it possible to use 2 config file to do this, one for development and one for production?
I tried to use different entry point in 2 config files, but it doesn't work for me, anyone knows how to change the entry point to something other than the default src/index.js?

[m4rvr]

@FateRiddle Should work with rollupInputOptions:

{
  rollupInputOptions: {
    // or whatever your entry file is
    input: path.resolve(__dirname, 'src/index.js')
  }
}

[m4rvr]

@ShenQingchuan Sure, you can start. But you'll need to wait before you publish it until the library problem is resolved. 😊

[syue-dev]

same problem, my Library just have one entry file index.ts, when I change rollupInputOptions input and build, I found the file compiled is empty.

[onx2]

I wasn't able to get input / output options or es modules to work the way I wanted so I'm using a custom Rollup config for building and leaving the dev server to vite. Since I'm using render functions and not .vue files, it looks something along the lines of what I have below; however, my config is bit more complex since I'm using Typescript and Sass, leaving those options out for brevity.

rollup.config.js

import pkg from "./package.json"

// Replace with your entry file
const input = "src/components/index.js"

// Use whatever plugins you want here
const plugins = []

export default [
  // ES modules build
  {
    input,
    output: {
      file: pkg.module,
      format: "es",
      exports: "named",
      sourcemap: true
    },
    plugins
  },
  // CommonJS build
  {
    input,
    output: {
      file: pkg.main,
      format: "cjs",
      sourcemap: true
    },
    plugins
  }
]

package.json

{
  "scripts": {
    "build": "npx rollup -c",
    ...other scripts
  },
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
   ...other settings
}

Is this feature something that will be included in Vite v1.x?

[sionzee]

I think this won't be possible with Vue 3 (at least without huge breaking change).

I noticed the issue when Vue 3 was in alpha and created issue at beta and it was rejected vuejs/core#1173.
The code what was not working for webpack is the same reason why it wont work for vite.

I think it is also reason why this issue is not solved yet. Because there is not simple way how to compile SFC templates and tell Vite to use Vue from global/app package. (#544)

Vite is mainly built for Vue and that is the reason why it won't be fixed till Vue is supporting it.
That could be issue right now because Vue is not in alpha anymore.

[ariesjia]

@FateRiddle Should work with rollupInputOptions:

{
  rollupInputOptions: {
    // or whatever your entry file is
    input: path.resolve(__dirname, 'src/index.js')
  }
}

Thanks.
It works， if not use Vue should config enableRollupPluginVue and jsx options

[guillaumebriday]

That would be so great to this coming. Vite is awesome to create app and it would be even better to develop, test and publish library.

How can we help?

Thanks

[misitebao]

@underfin Thank you for the fact that the component library of design has not been packaged in the same way as the component library of design. However, I still don't want to package the output of the component into the design directory. Is there a better solution?thank you.

[guillaumebriday]

@misitebao I don't understand what you mean :/

[stoem]

We're building an app that deploys assets to S3/Cloudfront which then in turn get loaded by various integrations. The hashing of the filenames that vite generates causes problems. It would be preferable to have control over the filenames, ie omit the hash in the name.
Cache control can be handled by cloudfront or app servers, it should be optional in a build tool.

[cawa-93]

same problem, my Library just have one entry file index.ts, when I change rollupInputOptions input and build, I found the file compiled is empty.

I was able to configure Vite to compile a TypeScript entrypoint in the electron app (nodejs back-end).

If this helps someone, my configuration is here. At first glance, this works great. At the output I get a working javascript file with all the optimizations

[yyx990803]

Supported in 2.0

[guillaumebriday]

It's here in the docs https://vitejs.dev/guide/build.html#library-mode

Thanks @yyx990803

[eikooc]

Just a heads up to anyone that might stop by here to create a library from vite. Currently you can't have multiple top-level fragments as that produces an output that cannot be rendered by vue. So remember to nest your components under one top-level tag.

e.g.

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="count++">count is: {{ count }}</button>
  </div>
</template>

[blowsie]

A simple repo of library mode in a vue3 project would be really useful, has anyone got one?

[alexandrstudio]

@blowsie Maybe this will help. https://github.com/quatrochan/Equal I'm not sure myself whether everything is right. I get error messages in Visual Studio Code: "Could not find a declaration file for module". And the import seem to use the my-lib.umd.js although it should use the my-lib.es.js file.

[wobsoriano]

A simple repo of library mode in a vue3 project would be really useful, has anyone got one?

I guess the petite-vue repo is a good example