Skip to content

[Cookbook] Packaging a Vue Single File Component (SFC) to share on npm #1545

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

Closed
mgdodge opened this issue Mar 30, 2018 · 2 comments
Closed
Labels

Comments

@mgdodge
Copy link
Contributor

mgdodge commented Mar 30, 2018

I have code and documentation that I prepared as part of my lightning talk at VueConfUS 2018, and was told it would be a great addition to the cook book.

  • Solve a specific, common problem: I was unable to find any concise documentation describing the steps required to package my SFC to share via npm. This recipe would describe the minimal steps to get an SFC ready to publish to npm.
  • Start with the simplest possible example: Simple example includes a total of 3 files outside the sample SFC itself. Those 3 files are all very brief and well documented.
  • Link to other docs, rather than re-explaining concepts: I provide links to the official npm documentation which describe how to name npm packages, what fields to include, etc.
  • Explain the process, rather than just the end result: While I did write a wizard to automate the process, I intentionally kept things as simple as possible so that the process would be easy to explain through comments, easily identified/editable template strings, and sample bash commands. This process would be explained in the recipe.
  • Explain the pros and cons of your strategy, including when it is and isn’t appropriate: I point out that this is a great way to quickly publish simple components, but is not meant to replace the full development experience orchestrated by the vue cli. This is also not a good candidate (as written) for full applications or complex components with multiple external resources (CSS, images, etc.) though those could be added to this recipe as an exercise for the user.
  • Mention alternative solutions...: The reason I wrote this recipe was because I was unable to find any adequate alternatives. I found one or two templates for getting started, but nothing that was very simple and included the entire process. Happy to link to any that I find in the meantime, or suggestions to others. Also, this uses rollup instead of webpack, but this could very easily be done with webpack (especially now that v4 has tree-shaking abilities as well.)

My npm submission for this, found at https://github.com/mgdodge/vue-sfc-rollup, includes a lot of the example code and README content that would go into this recipe. A proper PR will be made when this is accepted as a recipe.

@sdras
Copy link
Member

sdras commented Mar 30, 2018

This is really detailed, thank you! As mentioned before, I think this will be a really useful recipe and benefit the community because it will help people release what they're working on. Onward! Can't wait for the PR.

@sdras
Copy link
Member

sdras commented May 25, 2018

This is in

@sdras sdras closed this as completed May 25, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants