Yeoman generator to create a Vue3 plugin with eslint, prettier, commitlint, husky, babel and other tools.
🏠 Homepage
This generator was created using generator-esmodules-generator version 0.1.1
The generator-quality-vue3-plugin
provides a structure to create a Vue3 plugin similar to that used in the: @cljmenez/vue-localstorage-reactive. The structure created by this generator includes:
- Jest with jest-environment-jsdom
- Babel with @babel/cli, @babel/core, @babel/plugin-transform-runtime, @babel/preset-env, @babel/runtime-corejs3 and core-js
- Eslint with eslint-config-prettier, eslint-config-standard, eslint-plugin-jest, eslint-plugin-jsdoc, etc.
- Prettier with prettier-plugin-jsdoc
- Lint-staged
- Faker
- Commitlint
- Rollup with @rollup/plugin-babel, @rollup/plugin-node-resolve and rollup-plugin-dts
- Readme-md-generator
- Husky
- Others
Example of a Vue3 plugin generated by generator-quality-vue3-plugin
:
This generator uses rollup to create the dist folder. The packages published by this generator are exported using the following structure:
package.json
"main": "./dist/cjs/index.cjs",
"types": "./dist/types/index.d.ts",
"exports": {
"types": "./dist/types/index.d.ts",
"import": "./dist/esm/index.mjs",
"require": "./dist/cjs/index.cjs"
},
"files": [
"dist"
]
- Installation
- The folder structure
- The configuration files
- The question: Do you want to automatically run the scripts that configure the package, then installing the dependencies?
- The scripts in package.json
- Getting To Know Yeoman
- Author
- Contributing
- Show your support
- License
First, install Yeoman and generator-quality-vue3-plugin using npm (we assume you have pre-installed node.js).
npm install -g yo
npm install -g generator-quality-vue3-plugin
Then generate your new project:
yo quality-vue3-plugin
The folders created by this generator are:
-
__tests__
: Contains the tests. -
.husky
: Contains the scripts used by husky. -
coverage
: Contains the test coverage. -
dist
: Includes three folders:-
cjs
: Source code transpiled to es5 (index.cjs). -
esm
: Source code transpiled to es6 (index.mjs). -
types
: Declaration file (index.d.ts).
-
-
src
: Contains the source code. It includes the files and folders-
globals
: Contains the files to extends@vue/runtime-core
. The functions $getGreeting and $greet are added in globalProperties for this generator when it creates the default plugin: -
gretting
: Example folder. Contains the functions $getGreeting and $greet. -
installer
: Contains the class used to install the plugin (class that contains the install method). -
main.js
: Exports the function createInstaller used to create the installer object that will be used to install the plugin in Vue3.Example:
The main.js file also it is the entrypoint used by rollup to generate the es5 and es6 folders (see rollup.config.js or rollup.config.mjs)
-
-
index.ts
: Exports the globals/index.js content and the createInstaller. It is the entrypoint used by rollup to generate the types folder (see rollup.config.js or rollup.config.mjs)
The configuration files included are:
-
Eslint:
.eslintignore
(the files and directories ignored by eslint) and.eslintrc.json
(configuration used by eslint). -
Git:
.gitignore
(the files and directories ignored by git). -
Lint-staged:
.lintstagedrc.json
(configuration used by lint-staged). -
Prettier:
.prettierignore
(the files and directories ignored by prettier) and.prettierrc.json
(configuration used by prettier). -
Babel:
babel.config.json
(configuration used by babel):-
The
env.buildCommonjs
contains the configuration used to transpile the source code to es5. It is used intorollup.config.js
androllup.config.mjs
. -
The
env.buildESmodules
contains the configuration used to transpile the source code to es6. It is used intorollup.config.js
androllup.config.mjs
. -
If the package.json, generated by this generator, contains the field
type:commonjs
will be included theenv.test
property in babel.config.json. That property is used by jest to transpile the source code to es5 before to run the tests.
-
-
Commitlint:
commitlint.config.js
(configuration used by commitlint). -
Jest:
jest.config.js
(configuration used by jest). -
Rollup:
rollup.config.js
androllup.config.mjs
(configuration used by rollup). -
TypeScript:
tsconfig.json
(configuration used by TypeScript compiler).
The question: Do you want to automatically run the scripts that configure the package, then installing the dependencies?
When you selects the true value, the following scripts ubicated in the package.json are executed:
init
documentation:create
test
build
If you selects the false value, you must run npm run init
obligatory.
The more important scripts added into the package.json created by this generator are:
-
"init"
: Runs the commands necessary to initialize the package, for exampleinit:husky
. -
"documentation:create"
: Creates documentation using readme-md-generator. -
"format"
: Checks the format using prettier. -
"format:fix"
: Fixes the format using prettier. -
"format:build-stage"
and"format:build-stage:fix"
: similar to"format"
and"format:fix"
. They used when thenpm run build
is called. -
"lint"
: static code analysis using eslint. -
"lint:fix"
: Fixes the code using eslint. -
"lint:build-stage"
and"lint:build-stage:fix"
: similar to"lint"
and"lint:fix"
. They are used when thenpm run build
is called. -
"build:bundle"
: Bundles the files into src folder using rollup. It is used when thenpm run build
is called. -
"build:tsc"
: Generates .d.ts files using the TypeScript compilator. It is used when thenpm run build
is called. -
"build"
: Generates the dist folder that contains the cjs folder (source code transpiled to es5), the esm folder (source code transpiled to es6), and types folder (it contains the declaration files). -
"prepublishOnly"
: Used before publishing your package usingnpm publish
. Runsnpm run build
. -
"test"
: Runs the tests using jest. -
"commitlint"
: Runs commitlint. It is used into .husky/commit-msg file. It is called by the commit-msg hook. See git hook. -
"lint-staged"
: Runs lint-staged. It is used into .husky/pre-commit file. It is called by the pre-commit hook. See git hook. -
"quality-check"
: Runsnpm run format && npm run lint && npm run test
. It is used into .husky/pre-push file. It is called by the pre-push hook See git hook.
- Yeoman has a heart of gold.
- Yeoman is a person with feelings and opinions, but is very easy to work with.
- Yeoman can be too opinionated at times but is easily convinced not to be.
- Feel free to learn more about Yeoman.
👤 Cristopher Jiménez
- Github: @cristopher1
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Give a ⭐️ if this project helped you!
Copyright © 2023 Cristopher Jiménez.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator