Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Library configuration preset #330

Closed
altitudems opened this issue Jun 2, 2020 · 20 comments
Closed

Library configuration preset #330

altitudems opened this issue Jun 2, 2020 · 20 comments
Labels
enhancement New feature or request

Comments

@altitudems
Copy link

altitudems commented Jun 2, 2020

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
Copy link
Contributor

m4rvr commented Jun 3, 2020

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
Copy link
Member

ShenQingchuan commented Jun 10, 2020

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
Copy link

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
Copy link
Contributor

m4rvr commented Jun 10, 2020

@FateRiddle Should work with rollupInputOptions:

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

@m4rvr
Copy link
Contributor

m4rvr commented Jun 10, 2020

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

@syue-dev
Copy link

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
Copy link

onx2 commented Jul 18, 2020

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
Copy link

sionzee commented Aug 9, 2020

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
Copy link

ariesjia commented Sep 8, 2020

@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
Copy link
Contributor

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
Copy link

@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
Copy link
Contributor

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

@stoem
Copy link

stoem commented Nov 9, 2020

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
Copy link
Contributor

cawa-93 commented Nov 25, 2020

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
Copy link
Member

Supported in 2.0

@guillaumebriday
Copy link
Contributor

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

Thanks @yyx990803

@eikooc
Copy link

eikooc commented Jan 13, 2021

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
Copy link

blowsie commented Feb 24, 2021

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

@alexandrstudio
Copy link

alexandrstudio commented Mar 5, 2021

@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
Copy link

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

@github-actions github-actions bot locked and limited conversation to collaborators Jul 24, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests