Webpack: UMD option for publishing to NPM?

[stephan-v]

I have been looking at a couple repositories for a neat starter project for publishing a collection of Vue components or a small library for Vue.js.

So far what I've seen is that they are either too simplistic or made by people who do not really understand what is going on with Webpack.

This template seems to fit the bill though, having HMR, different Webpack setups per environment, a linter, unit testing, e2e testing, etc.

I was kind of surprised to see there is no way to neatly publish a library with this template though. Is this conscious a choice or has this just never been added?

I would love a Webpack config for publishing to NPM with externals options libraryTarget, etc.

At the moment I am trying to figure this out all on my own so I at least have an understanding of what is going on but this is taking quite some time to figure out. It would be nice to have a community effort for something like this and although I am willing to help, I am no expert on this(yet :P).

Thoughts?

[LinusBorg]

We are aware that there's a need for a template for developing components/packages/plugins as opposed to a full app.

This template is meant for the latter. I don't think it makes sense to try and turn it into a template that can also create plugins/packages, because it's not just about some webpack options.

Ideally, you don't use webpack to bundle packages for production, but rollup, because the runtime overhead of webpack increases the size disroportionally for small libs.

Also, ideally you build more than one version for production, at least:

• UMD version
• ES module version (for tree shaking in bundlers that support it (rollup, webpack >=2)

As you can see, a proper template for this will work quite a bit differently, so it should be done in a different template alltogether, instead of shoehorning it into this one.

About the question weither we are working on this: Yes and no.

• Yes, insofar as many of our core team members have set up their own templates for this that are publicly available (see below)
• No, insofar as for reasons of resources, there currently are no efforts in creating one "official" template from these existing solutions.

---

Available templates:

• https://github.com/posva/vue-plugin-template
• https://github.com/ktsn/template-vue-component
• ...one or two other which I can't find currently :-P

[stephan-v]

Thanks for your reply.

Could you possibly link some templates that are a good example on how to create a production build with rollup and Vue? It would really help me out.

I guess there would indeed have to be another template that targets development and not extend upon this template.

It would also probably be pretty hard to create a generic template for this since the requirements on a per-project-basis are widely different when it comes to creating a build for NPM.

It is just pretty hard to figure out best-practices like this though. I didn't even knew rollup was better suited for this.

[LinusBorg]

I just edited my OP with some templates. I know there are one or two more, but can't find them in my long list of GH stars at the moment.

@kazupon should have one I think.

@egoist has a more general template for npm packages not focussed on Vue alone:

https://github.com/egoist/template-nm

I didn't even knew rollup was better suited for this.

Something to read about that topic:

https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

[tinchox5]

It would be nice and useful to have an official template for plugins. I think the demand will increase because the vue community is growing and also is maturing. For instance, I'm not a pro dev, but recently I 've realized that I need a clear way to create a plugin in order to share what I have learnt. I will try to use one of the templates you suggested above and see what happens, but maybe it is possible to redistribute some resources to prioritize that. I mean as you told there are core team members thats have already their own templates.
It is just a wish, you guys are doing awesome things with Vue

[Toilal]

For everybody who needs a TypeScript or a Library template, you should try again https://github.com/Toilal/vue-webpack-template. It's merged with current develop branch of webpack template, and now brings 3 new questions on top of it:

1) Project Type : App/Library. (When you choose Library, sources are splitted in 2 folders, src for the library and app for the demo/docs app.
2) Which language do you want to use? TypeScript (ts-loader + babel)/ES2015 (babel)
3) Use Class-Style Components (vue-class-component + vue-property-decorators)? Y/N

The template currently use dummy Single File Components with src attributes poiting to external html/css/ts/js files because TSLint doesn't support checking vue files, but I consider adding an option to really use Single File Components like in the official webpack template. For now, It's still possible to manually copy/paste the html/css/ts/js files into vue files.

For people who tested this fork months ago, It's now really closer to the official webpack template (it use vue-loader).

[Toilal]

@stephan-v Checkout this template :) (It doesn't use rollup, but it tries to do it's best with webpack 3)