gem-hunter
Language: JavaScript
š Solid foundation to start a Vue plugin with the best developer experience and a focus on performance
āØ DX experience & lighter plugins š
vue init posva/vue-plugin-template my-awesome-plugin # Answer some questions cd my-awesome-plugin yarn npm run dev # š
Bundle with Rollup. This produces bundles that are easier to debug and more lightweight but is less customizable than Webpack. But don't worry you can also use Webpack instead of Rollup š
Write your components using .vue files. Those will be compiled into render
functions when building your plugin to make them compatible everywhere.
Add jsx to your js files and they will be compiled as well.
Use the future features of Javascript.
Runs eslint and stylefmt/stylelint before each commit on modified files
only and try to fix them automatically to prevent failing CI builds š.
Get the best developer experience by testing the components at the same time you interact with them. Embrace Visual testing š
Use PostCSS by default with CSSNext to bring you future features of CSS.
You still need a preprocessor? Choose Webpack as the bundler and access more advanced features
Add warnings to improve the DX of your plugin that are removed when bundling in production mode:
if (process.env.NODE_ENV !== 'production' && warningCondition) { warn('You should be doing things this way instead: ...') }
Refer to Dist files for more information.
.github folderSomething you would like to see on the template but not in the road-map? Fire an Issue!
Q: Why are there 3 different generated files for js in the dist folder?
A: Each one serves its purpose: the non minified file (lib.js) replaces process.env.NODE_ENV by "development" to keep development only features like warning (pretty much like Vue warnings). The CommonJS file (lib.common.js) is meant to be used with bundlers like Webpack or Rollup and keeps the variable process.env.NODE_ENV so it can be replaced by bundlers. The minified version (lib.min.js) strips off development features by replacing process.env.NODE_ENV by "production".
Q: When should I choose Rollup over Webpack for the bundler?
A: If next-css isn't enough for you, it's better to use Webpack. If a feature is missing in vue-rollup-plugin but present on vue-loader you can benefit from it by using Webpack. On the other hand if you're building a simple plugin with few components, you should use Rollup as the bundler to get more lightweight lib sizes.
See CONTRIBUTING.md for help about developing this template