UNPKG

34.7 kBMarkdownView Raw
1<p style="text-align: center; background: white;">
2 <a href="https://leanupjs.org">
3 <img src="https://leanupjs.org/assets/logo.svg" height="100">
4 </a><br>
5 <h2 style="text-align: center;">
6 <cite><b>Make things pure</b> ... to become lean.</cite>
7 </h2>
8</p>
9<!-- <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/du_BnIZzEKs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true"></iframe> -->
10<hr>
11
12[![downloads][downloads]][downloads-url]
13[![npm][npm]][npm-url]
14[![license][license]][license-url]
15
16[![dependencies][dependencies]][dependencies-url]
17[![devDependencies][devdependencies]][devdependencies-url]
18[![peerDependencies][peerdependencies]][peerdependencies-url]
19[![optionalDependencies][optionaldependencies]][optionaldependencies-url]
20
21[![vulnerabilities][vulnerabilities]][vulnerabilities-url]
22[![install-size][install-size]][install-size-url]
23
24[![lernajs][lernajs]][lernajs-url]
25[![prettier][prettier]][prettier-url]
26
27[leanup]: https://leanupjs.org/assets/logo.svg
28[leanup-url]: https://leanupjs.org
29[downloads]: https://img.shields.io/npm/dt/@leanup/cli.svg
30[downloads-url]: https://npmcharts.com/compare/@leanup/cli
31[npm]: https://img.shields.io/npm/v/@leanup/cli
32[npm-url]: https://www.npmjs.com/package/@leanup/cli
33[license]: https://img.shields.io/npm/l/@leanup/cli
34[license-url]: https://github.com/leanupjs/leanup/blob/master/LICENSE
35[dependencies]: https://status.david-dm.org/gh/leanupjs/leanup.svg?path=packages/cli/core&ref=release/1.1
36[dependencies-url]: https://david-dm.org/leanupjs/leanup?path=packages/cli/core&ref=release/1.1
37[devdependencies]: https://status.david-dm.org/gh/leanupjs/leanup.svg?path=packages/cli/core&ref=release/1.1&type=dev
38[devdependencies-url]: https://david-dm.org/leanupjs/leanup?path=packages/cli/core&ref=release/1.1&type=dev
39[peerdependencies]: https://status.david-dm.org/gh/leanupjs/leanup.svg?path=packages/cli/core&ref=release/1.1&type=peer
40[peerdependencies-url]: https://david-dm.org/leanupjs/leanup?path=packages/cli/core&ref=release/1.1&type=peer
41[optionaldependencies]: https://status.david-dm.org/gh/leanupjs/leanup.svg?path=packages/cli/core&ref=release/1.1&type=optional
42[optionaldependencies-url]: https://david-dm.org/leanupjs/leanup?path=packages/cli/core&ref=release/1.1&type=optional
43[vulnerabilities]: https://snyk.io/test/npm/@leanup/cli/badge.svg
44[vulnerabilities-url]: https://snyk.io/test/npm/@leanup/cli
45[install-size]: https://packagephobia.now.sh/badge?p=@leanup/cli@next
46[install-size-url]: https://packagephobia.now.sh/result?p=@leanup/cli@next
47[lernajs]: https://img.shields.io/badge/managed%20with-lerna-blueviolet
48[lernajs-url]: https://lerna.js.org
49[prettier]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg
50[prettier-url]: https://prettier.io
51
52<h1>leanup<sup style="color: grey; font-size: 75%"> CLI</sup></h1>
53
54The **`@leanup` CLI** contains all required popular tools in there minimal default, transparent and extensible configuration to develop JavaScript/TypeScript web applications.
55
56- [Motivation](#motivation)
57- [Principles](#principles)
58- [Demo](#demo)
59- [Installation](#installation)
60- [Features](#features)
61- [Structure](#structure)
62 - [Frameworks](#frameworks)
63 - [Extensions](#extensions)
64 - [Thinks](#thinks)
65- [Usage](#usage)
66 - [Help](#help)
67 - [Create](#create)
68 - [Developing](#developing)
69 - [Building](#building)
70 - [Unit-Testing](#unit-testing)
71 - [Test-Coverage](#test-coverage)
72 - [E2E-Testing](#e2e-testing)
73 - [Formatter](#formatter)
74 - [Linter](#linter)
75- [Replaced environment variables](#replaced-environment-variables)
76- [Dependencies](#dependencies)
77- [Peer dependencies](#peer-dependencies)
78- [Optional tools](#optional-tools)
79
80## Motivation
81
82- Learnability
83- Controllability
84- Universality
85- Flexibility
86- Scalability
87- Durability
88- Transparency
89
90## Principles
91
92- convention over configuration
93- pure commands under the hood
94- don't repeat yourself
95- following the generic instead of the influenced way
96- keep the dependencies always up to date
97
98## Demo
99
100There are some working examples:
101
102- [https://github.modevel.de/poc/](https://github.modevel.de/poc/)
103- [PoC - Flexible web application architecture](https://github.com/martinoppitz/poc-flexible-web-application-architecture#readme)
104- [Hello World - Comparison](https://github.com/martinoppitz/hello-world-comparison#readme)
105
106## Installation
107
108To install the **`@leanup` CLI** execute the following command:
109
110> `npm install @leanup/cli typescript --save-dev`
111
112And a non-framework or framework strategy must also be selected:
113
114Non-framework:
115
116> `npm install @leanup/cli-vanilla --save-dev`
117
118Or with framework:
119
120`npm install @leanup/cli-angular --save-dev` or<br>
121`npm install @leanup/cli-angularjs --save-dev` or<br>
122`npm install @leanup/cli-aurelia --save-dev` or<br>
123`npm install @leanup/cli-inferno --save-dev` or<br>
124`npm install @leanup/cli-lit-element --save-dev` or<br>
125`npm install @leanup/cli-preact --save-dev` or<br>
126`npm install @leanup/cli-react --save-dev` or<br>
127`npm install @leanup/cli-svelte --save-dev` or<br>
128`npm install @leanup/cli-vue --save-dev` or<br>
129`npm install @leanup/cli-vue3 --save-dev`
130
131Install the peer dependencies `chromedriver`, `geckodriver` or `selenium-server` in the required version, if you need that features.
132
133- `npm install chromedriver --save-dev`
134- `npm install geckodriver --save-dev`
135- `npm install selenium-server--save-dev`
136
137## Features
138
139| Tool/Technology | Description | Status | Note |
140| ---------------- | :---------------: | :----: | :------------------------- |
141| [Babel] | Transpiler | ✔️ | ready |
142| [Webpack] | Bundler | ✔️ | ready |
143| [Snowpack] | Bundler | ⌛ | in progress |
144| [Vite] | Bundler | ⌛ | in progress |
145| [TypeScript] | Language | ✔️ | ready |
146| [Mocha] | Unit-Test-Runner | ✔️ | ready |
147| [Chai] | Assertion | ✔️ | ready |
148| [Sinon] | Mocking | ✔️ | ready |
149| [NYC] | Code-Coverage | ✔️ | ready |
150| [ESLint] | Code-Checker | ✔️ | ready |
151| [Nightwatch.js] | E2E-Test-Runner | ✔️ | ready |
152| [Allsure] | Report | ✔️ | ready |
153| [Cucumber] | BDD | ✔️ | ready |
154| [robotframework] | BDD | ⌛ | will be evaluated |
155| [Storybook] | Documentation | ⌛ | in progress |
156| [GraphQL] | API | ✔️ | ready |
157| [Workbox] | PWA | ✔️ | ready |
158| [Lerna] | Mono-Repo | ✔️ | ready |
159| [Ant-Design] | Design-System | ✔️ | proved |
160| [Material] | Design-System | ✔️ | proved |
161| [Bootstrap] | Design-System | ✔️ | proved |
162| [Tailwindcss] | Design-System | ✔️ | proved |
163| [Nexus IQ] | Vulnerabiliy-Gate | ✔️ | ready |
164| [Less] | CSS | ✔️ | ready |
165| [Sass] | CSS | ✔️ | ready |
166| [PostCSS] | CSS | ✔️ | ready |
167| [Webhint] | Webhint | ✔️ | moved \*\*\* |
168| [TestCafe] | E2E-Test-Runner | ⌛ | will be evaluated \*\*\*\* |
169| [TSLint] | Code-Checker | ❌ | removed \*\* |
170| [Cypress] | E2E-Test-Runner | ❌ | excluded \* |
171
172> \*
173> Arguments agains [Cypress]:
174>
175> - reinvent wheel
176> - detect css selectors
177> - BDD test syntax
178> - principals
179> - large tooling
180> - a lot of binaries
181> - many dependencies
182> - ci integration vs selenium hub
183>
184> It is difficult to keep focus with Cypress as it is more a nice tool than an effective tool. It is expected that a lot of time will be invested to justify the requirements of a project.
185
186> \*\* TSLint is deprecated.
187
188> \*\*\* Webhint is not practical for the development of components, since component tags often have no relation to standard HTML. In addition, the webhint package alone is over 100 MB in size. I have good by using a IDE webhint plugin, like [VSCode webhint](https://marketplace.visualstudio.com/items?itemName=webhint.vscode-webhint).
189
190> \*\*\*\* [TestCafe] The idea that defined TestCafe architecture was that you don't really need an external driver to run end-to-end tests in the browser. That's interesting.
191
192## Structure
193
194Vanilla Java-/TypeScript are supported by default. That means for example custom elements and any plain Java-/TypeScript code.
195
196- [`@leanup/cli`](https://www.npmjs.com/package/@leanup/cli) ✔️
197- [`@leanup/cli-vanilla`](https://www.npmjs.com/package/@leanup/cli-vanilla) (optional) ✔️ [![vulnerabilities of @leanup/cli-vanilla](https://snyk.io/test/npm/@leanup/cli-vanilla/badge.svg)](https://snyk.io/test/npm/@leanup/cli-vanilla)
198
199### Frameworks
200
201Vanilla Java-/TypeScript are supported by default. That means for example custom elements and any plain Java-/TypeScript code.
202
203The selection of the following frameworks depends in parts on the following references:
204
205- [report](https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results#js-framework-essential),
206- [benchmark](https://krausest.github.io/js-framework-benchmark/2020/table_chrome_80.html) and
207- [survey](https://2019.stateofjs.com/front-end-frameworks)
208
209Currently the following framework extensions are available:
210
211- [`@leanup/cli-angular`](https://www.npmjs.com/package/@leanup/cli-angular) ✔️ [![vulnerabilities of @leanup/cli-angular](https://snyk.io/test/npm/@leanup/cli-angular/badge.svg)](https://snyk.io/test/npm/@leanup/cli-angular)
212- [`@leanup/cli-angularjs`](https://www.npmjs.com/package/@leanup/cli-angularjs) ✔️ [![vulnerabilities of @leanup/cli-angularjs](https://snyk.io/test/npm/@leanup/cli-angularjs/badge.svg)](https://snyk.io/test/npm/@leanup/cli-angularjs)
213- [`@leanup/cli-aurelia`](https://www.npmjs.com/package/@leanup/cli-aurelia) ✔️ [![vulnerabilities of @leanup/cli-aurelia](https://snyk.io/test/npm/@leanup/cli-aurelia/badge.svg)](https://snyk.io/test/npm/@leanup/cli-aurelia)
214- [`@leanup/cli-inferno`](https://www.npmjs.com/package/@leanup/cli-inferno) ✔️ [![vulnerabilities of @leanup/cli-inferno](https://snyk.io/test/npm/@leanup/cli-inferno/badge.svg)](https://snyk.io/test/npm/@leanup/cli-inferno)
215- [`@leanup/cli-lit-element`](https://www.npmjs.com/package/@leanup/cli-lit-element) ✔️ [![vulnerabilities of @leanup/cli-lit-element](https://snyk.io/test/npm/@leanup/cli-lit-element/badge.svg)](https://snyk.io/test/npm/@leanup/cli-lit-element)
216- [`@leanup/cli-preact`](https://www.npmjs.com/package/@leanup/cli-preact) ✔️ [![vulnerabilities of @leanup/cli-preact](https://snyk.io/test/npm/@leanup/cli-preact/badge.svg)](https://snyk.io/test/npm/@leanup/cli-preact)
217- [`@leanup/cli-react`](https://www.npmjs.com/package/@leanup/cli-react) ✔️ [![vulnerabilities of @leanup/cli-react](https://snyk.io/test/npm/@leanup/cli-react/badge.svg)](https://snyk.io/test/npm/@leanup/cli-react)
218- [`@leanup/cli-svelte`](https://www.npmjs.com/package/@leanup/cli-svelte) ✔️ [![vulnerabilities of @leanup/cli-svelte](https://snyk.io/test/npm/@leanup/cli-svelte/badge.svg)](https://snyk.io/test/npm/@leanup/cli-svelte)
219- [`@leanup/cli-vue`](https://www.npmjs.com/package/@leanup/cli-vue) ✔️ [![vulnerabilities of @leanup/cli-vue](https://snyk.io/test/npm/@leanup/cli-vue/badge.svg)](https://snyk.io/test/npm/@leanup/cli-vue)
220- [`@leanup/cli-vue3`](https://www.npmjs.com/package/@leanup/cli-vue3) ✔️ (RC) [![vulnerabilities of @leanup/cli-vue3](https://snyk.io/test/npm/@leanup/cli-vue3/badge.svg)](https://snyk.io/test/npm/@leanup/cli-vue3)
221
222### Extensions
223
224A separate package contains some nice but not required addons for webpack.
225
226- [`@leanup/cli-addons`](https://www.npmjs.com/package/@leanup/cli-addons) ✔️ [![vulnerabilities of @leanup/cli-addons](https://snyk.io/test/npm/@leanup/cli-addons/badge.svg)](https://snyk.io/test/npm/@leanup/cli-addons)
227- [`@leanup/cli-cucumber`](https://www.npmjs.com/package/@leanup/cli-cucumber) ✔️ [![vulnerabilities of @leanup/cli-cucumber](https://snyk.io/test/npm/@leanup/cli-cucumber/badge.svg)](https://snyk.io/test/npm/@leanup/cli-cucumber)
228- [`@leanup/cli-graphql`](https://www.npmjs.com/package/@leanup/cli-graphql) ✔️ [![vulnerabilities of @leanup/cli-graphql](https://snyk.io/test/npm/@leanup/cli-graphql/badge.svg)](https://snyk.io/test/npm/@leanup/cli-cucumber)
229- [`@leanup/cli-pwa`](https://www.npmjs.com/package/@leanup/cli-pwa) ✔️ [![vulnerabilities of @leanup/cli-pwa](https://snyk.io/test/npm/@leanup/cli-pwa/badge.svg)](https://snyk.io/test/npm/@leanup/cli-pwa)
230- [`@leanup/cli-webhint`](https://www.npmjs.com/package/@leanup/cli-webhint) ✔️ [![vulnerabilities of @leanup/cli-webhint](https://snyk.io/test/npm/@leanup/cli-webhint/badge.svg)](https://snyk.io/test/npm/@leanup/cli-webhint)
231
232### Thinks
233
234There a separate packages for important application features.
235
236- [`@leanup/git-hooks`](https://www.npmjs.com/package/@leanup/git-hooks) ✔️ [![vulnerabilities of autoprefixer](https://snyk.io/test/npm/@leanup/git-hooks/badge.svg)](https://snyk.io/test/npm/@leanup/git-hooks)
237- [`@leanup/form`](https://www.npmjs.com/package/@leanup/form) ✔️ [![vulnerabilities of autoprefixer](https://snyk.io/test/npm/@leanup/form/badge.svg)](https://snyk.io/test/npm/@leanup/form)
238- [`@leanup/lib`](https://www.npmjs.com/package/@leanup/lib) ✔️ [![vulnerabilities of autoprefixer](https://snyk.io/test/npm/@leanup/lib/badge.svg)](https://snyk.io/test/npm/@leanup/lib)
239- @leanup/ul ⌛
240
241## Usage
242
243If the CLI is also installed globally with `npm install -g @leanup/cli`, you can use the command `lean` directly in the bash.
244
245If not, you must use `npx` and put it before the command. Like this: `npx lean`
246
247### Help
248
249> `> lean -h` (or `npx lean -h`)
250
251### Create
252
253> `> lean create -h` (or `npx lean create -h`)
254
255### Developing
256
257> `> lean serve -h` (or `npx lean serve -h`)
258
259### Building
260
261> `> lean build -h` (or `npx lean build -h`)
262
263### Unit-Testing
264
265> `> lean test -h` (or `npx lean test -h`)
266
267### Test-Coverage
268
269> `> lean coverage -h` (or `npx lean coverage -h`)
270
271### E2E-Testing
272
273> `> lean e2e -h` (or `npx lean e2e -h`)
274
275### Formatter
276
277> `> lean format -h` (or `npx lean format -h`)
278
279### Linter
280
281> `> lean lint -h` (or `npx lean lint -h`)
282
283## Replaced environment variables
284
285The following variable names are replaced by the values from `package.json` file in the bundle:
286
287| Name | Description |
288| ------------ | ----------------------------------------------------------------- |
289| APP_AUTHER | The value of the `author` attribute from the package.json file. |
290| APP_HOMEPAGE | The value of the `homepage` attribute from the package.json file. |
291| APP_NAME | The value of the `name` attribute from the package.json file. |
292| APP_VERSION | The value of the `version` attribute from the package.json file. |
293| NODE_ENV | The value of the `version` attribute from the package.json file. |
294
295**For example:**
296
297`package.json`:
298
299```json
300{
301 "name": "@scope/my-app",
302 "version": "1.1.0",
303 "description": "This CLI brings along all required tools to serve, test and build multi framework SPAs",
304 "author": "Martin Oppitz <npmjs@martinoppitz.com>",
305 "homepage": "https://leanupjs.org",
306 ...
307```
308
309App code:
310
311```js
312const APP_METADATA = {
313 author: '$$APP_AUTHER$$',
314 homepage: '$$APP_HOMEPAGE$$',
315 name: '$$APP_NAME$$',
316 version: '$$APP_VERSION$$',
317 environment: '$$NODE_ENV$$', // development | test | production ⌛
318};
319console.log(APP_METADATA);
320```
321
322<!-- | $1 | [![install size of $1](https://packagephobia.now.sh/badge?p=$1)](https://packagephobia.now.sh/result?p=$1) | [![vulnerabilities of $1](https://snyk.io/test/npm/$1/badge.svg)](https://snyk.io/test/npm/$1) | -->
323
324## Dependencies
325
326| Package | Size | Vulnerabilities |
327| --------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
328| @babel/core | [![install size of @babel/core](https://packagephobia.now.sh/badge?p=@babel/core)](https://packagephobia.now.sh/result?p=@babel/core) | [![vulnerabilities of @babel/core](https://snyk.io/test/npm/@babel/core/badge.svg)](https://snyk.io/test/npm/@babel/core) |
329| @babel/plugin-proposal-class-properties | [![install size of @babel/plugin-proposal-class-properties](https://packagephobia.now.sh/badge?p=@babel/plugin-proposal-class-properties)](https://packagephobia.now.sh/result?p=@babel/plugin-proposal-class-properties) | [![vulnerabilities of @babel/plugin-proposal-class-properties](https://snyk.io/test/npm/@babel/plugin-proposal-class-properties/badge.svg)](https://snyk.io/test/npm/@babel/plugin-proposal-class-properties) |
330| @babel/plugin-proposal-decorators | [![install size of @babel/plugin-proposal-decorators](https://packagephobia.now.sh/badge?p=@babel/plugin-proposal-decorators)](https://packagephobia.now.sh/result?p=@babel/plugin-proposal-decorators) | [![vulnerabilities of @babel/plugin-proposal-decorators](https://snyk.io/test/npm/@babel/plugin-proposal-decorators/badge.svg)](https://snyk.io/test/npm/@babel/plugin-proposal-decorators) |
331| @babel/preset-env | [![install size of @babel/preset-env](https://packagephobia.now.sh/badge?p=@babel/preset-env)](https://packagephobia.now.sh/result?p=@babel/preset-env) | [![vulnerabilities of @babel/preset-env](https://snyk.io/test/npm/@babel/preset-env/badge.svg)](https://snyk.io/test/npm/@babel/preset-env) |
332| @babel/preset-typescript | [![install size of @babel/preset-typescript](https://packagephobia.now.sh/badge?p=@babel/preset-typescript)](https://packagephobia.now.sh/result?p=@babel/preset-typescript) | [![vulnerabilities of @babel/preset-typescript](https://snyk.io/test/npm/@babel/preset-typescript/badge.svg)](https://snyk.io/test/npm/@babel/preset-typescript) |
333| @types/node | [![install size of @types/node](https://packagephobia.now.sh/badge?p=@types/node)](https://packagephobia.now.sh/result?p=@types/node) | [![vulnerabilities of @types/node](https://snyk.io/test/npm/@types/node/badge.svg)](https://snyk.io/test/npm/@types/node) |
334| autoprefixer | [![install size of chai](https://packagephobia.now.sh/badge?p=autoprefixer)](https://packagephobia.now.sh/result?p=autoprefixer) | [![vulnerabilities of autoprefixer](https://snyk.io/test/npm/autoprefixer/badge.svg)](https://snyk.io/test/npm/autoprefixer) |
335| babel-loader | [![install size of babel-loader](https://packagephobia.now.sh/badge?p=babel-loader)](https://packagephobia.now.sh/result?p=babel-loader) | [![vulnerabilities of babel-loader](https://snyk.io/test/npm/babel-loader/badge.svg)](https://snyk.io/test/npm/babel-loader) |
336| chalk | [![install size of chai](https://packagephobia.now.sh/badge?p=chalk)](https://packagephobia.now.sh/result?p=chalk) | [![vulnerabilities of chalk](https://snyk.io/test/npm/chalk/badge.svg)](https://snyk.io/test/npm/chalk) |
337| commander | [![install size of commander](https://packagephobia.now.sh/badge?p=commander)](https://packagephobia.now.sh/result?p=commander) | [![vulnerabilities of commander](https://snyk.io/test/npm/commander/badge.svg)](https://snyk.io/test/npm/commander) |
338| copy-modules-webpack-plugin | [![install size of copy-modules-webpack-plugin](https://packagephobia.now.sh/badge?p=copy-modules-webpack-plugin)](https://packagephobia.now.sh/result?p=copy-modules-webpack-plugin) | [![vulnerabilities of copy-modules-webpack-plugin](https://snyk.io/test/npm/copy-modules-webpack-plugin/badge.svg)](https://snyk.io/test/npm/copy-modules-webpack-plugin) |
339| css-loader | [![install size of css-loader](https://packagephobia.now.sh/badge?p=css-loader)](https://packagephobia.now.sh/result?p=css-loader) | [![vulnerabilities of css-loader](https://snyk.io/test/npm/css-loader/badge.svg)](https://snyk.io/test/npm/css-loader) |
340| esbuild-loader | [![install size of esbuild-loader](https://packagephobia.now.sh/badge?p=esbuild-loader)](https://packagephobia.now.sh/result?p=esbuild-loader) | [![vulnerabilities of esbuild-loader](https://snyk.io/test/npm/esbuild-loader/badge.svg)](https://snyk.io/test/npm/esbuild-loader) |
341| file-loader | [![install size of file-loader](https://packagephobia.now.sh/badge?p=file-loader)](https://packagephobia.now.sh/result?p=file-loader) | [![vulnerabilities of file-loader](https://snyk.io/test/npm/file-loader/badge.svg)](https://snyk.io/test/npm/file-loader) |
342| less | [![install size of less](https://packagephobia.now.sh/badge?p=less)](https://packagephobia.now.sh/result?p=less) | [![vulnerabilities of less](https://snyk.io/test/npm/less/badge.svg)](https://snyk.io/test/npm/less) |
343| less-loader | [![install size of less-loader](https://packagephobia.now.sh/badge?p=less-loader)](https://packagephobia.now.sh/result?p=less-loader) | [![vulnerabilities of less-loader](https://snyk.io/test/npm/less-loader/badge.svg)](https://snyk.io/test/npm/less-loader) |
344| postcss | [![install size of postcss](https://packagephobia.now.sh/badge?p=postcss)](https://packagephobia.now.sh/result?p=postcss) | [![vulnerabilities of postcss](https://snyk.io/test/npm/postcss/badge.svg)](https://snyk.io/test/npm/postcss) |
345| postcss-loader | [![install size of postcss-loader](https://packagephobia.now.sh/badge?p=postcss-loader)](https://packagephobia.now.sh/result?p=postcss-loader) | [![vulnerabilities of postcss-loader](https://snyk.io/test/npm/postcss-loader/badge.svg)](https://snyk.io/test/npm/postcss-loader) |
346| sass | [![install size of sass](https://packagephobia.now.sh/badge?p=sass)](https://packagephobia.now.sh/result?p=sass) | [![vulnerabilities of sass](https://snyk.io/test/npm/sass/badge.svg)](https://snyk.io/test/npm/sass) |
347| sass-loader | [![install size of sass-loader](https://packagephobia.now.sh/badge?p=sass-loader)](https://packagephobia.now.sh/result?p=sass-loader) | [![vulnerabilities of sass-loader](https://snyk.io/test/npm/sass-loader/badge.svg)](https://snyk.io/test/npm/sass-loader) |
348| string-replace-loader | [![install size of string-replace-loader](https://packagephobia.now.sh/badge?p=string-replace-loader)](https://packagephobia.now.sh/result?p=string-replace-loader) | [![vulnerabilities of string-replace-loader](https://snyk.io/test/npm/string-replace-loader/badge.svg)](https://snyk.io/test/npm/string-replace-loader) |
349| style-loader | [![install size of style-loader](https://packagephobia.now.sh/badge?p=style-loader)](https://packagephobia.now.sh/result?p=style-loader) | [![vulnerabilities of fibers](https://snyk.io/test/npm/style-loader/badge.svg)](https://snyk.io/test/npm/style-loader) |
350| webpack | [![install size of webpack](https://packagephobia.now.sh/badge?p=webpack)](https://packagephobia.now.sh/result?p=webpack) | [![vulnerabilities of webpack](https://snyk.io/test/npm/webpack/badge.svg)](https://snyk.io/test/npm/webpack) |
351| webpack-cli | [![install size of webpack-cli](https://packagephobia.now.sh/badge?p=webpack-cli)](https://packagephobia.now.sh/result?p=webpack-cli) | [![vulnerabilities of webpack-cli](https://snyk.io/test/npm/webpack-cli/badge.svg)](https://snyk.io/test/npm/webpack-cli) |
352| webpack-dev-server | [![install size of webpack-dev-server](https://packagephobia.now.sh/badge?p=webpack-dev-server)](https://packagephobia.now.sh/result?p=webpack-dev-server) | [![vulnerabilities of webpack-dev-server](https://snyk.io/test/npm/webpack-dev-server/badge.svg)](https://snyk.io/test/npm/webpack-dev-server) |
353
354## Peer dependencies
355
356| Package | Size | Vulnerabilities |
357| --------------: | ------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: |
358| chromedriver | [![install size of chromedriver](https://packagephobia.now.sh/badge?p=chromedriver)](https://packagephobia.now.sh/result?p=chromedriver) | [![vulnerabilities of chromedriver](https://snyk.io/test/npm/chromedriver/badge.svg)](https://snyk.io/test/npm/chromedriver) |
359| geckodriver | [![install size of geckodriver](https://packagephobia.now.sh/badge?p=geckodriver)](https://packagephobia.now.sh/result?p=geckodriver) | [![vulnerabilities of geckodriver](https://snyk.io/test/npm/geckodriver/badge.svg)](https://snyk.io/test/npm/geckodriver) |
360| graphql | [![install size of graphql](https://packagephobia.now.sh/badge?p=graphql)](https://packagephobia.now.sh/result?p=graphql) | [![vulnerabilities of graphql](https://snyk.io/test/npm/graphql/badge.svg)](https://snyk.io/test/npm/graphql) |
361| selenium-server | [![install size of selenium-server](https://packagephobia.now.sh/badge?p=selenium-server)](https://packagephobia.now.sh/result?p=selenium-server) | [![vulnerabilities of selenium-server](https://snyk.io/test/npm/selenium-server/badge.svg)](https://snyk.io/test/npm/selenium-server) |
362| typescript | [![install size of typescript](https://packagephobia.now.sh/badge?p=typescript)](https://packagephobia.now.sh/result?p=typescript) | [![vulnerabilities of typescript](https://snyk.io/test/npm/typescript/badge.svg)](https://snyk.io/test/npm/typescript) |
363
364## Optional tools
365
366| Package | Size | Vulnerabilities |
367| -----------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------: |
368| @leanup/git-hooks | [![install size of @leanup/git-hooks](https://packagephobia.now.sh/badge?p=@leanup/git-hooks)](https://packagephobia.now.sh/result?p=@leanup/git-hooks) | [![vulnerabilities of @leanup/git-hooks](https://snyk.io/test/npm/@leanup/git-hooks/badge.svg)](https://snyk.io/test/npm/@leanup/git-hooks) |
369| allure-commandline | [![install size of allure-commandline](https://packagephobia.now.sh/badge?p=allure-commandline)](https://packagephobia.now.sh/result?p=allure-commandline) | [![vulnerabilities of allure-commandline](https://snyk.io/test/npm/allure-commandline/badge.svg)](https://snyk.io/test/npm/allure-commandline) |
370| lerna | [![install size of lerna](https://packagephobia.now.sh/badge?p=lerna)](https://packagephobia.now.sh/result?p=lerna) | [![vulnerabilities of lerna](https://snyk.io/test/npm/lerna/badge.svg)](https://snyk.io/test/npm/lerna) |
371| workbox-cli | [![install size of workbox-cli](https://packagephobia.now.sh/badge?p=workbox-cli)](https://packagephobia.now.sh/result?p=workbox-cli) | [![vulnerabilities of workbox-cli](https://snyk.io/test/npm/workbox-cli/badge.svg)](https://snyk.io/test/npm/workbox-cli) |
372
373[babel]: https://babeljs.io
374[typescript]: https://typescriptlang.org
375[webpack]: https://webpack.js.org
376[mocha]: https://mochajs.org
377[chai]: https://www.chaijs.com
378[sinon]: https://sinonjs.org
379[nyc]: https://istanbul.js.org
380[storybook]: https://storybook.js.org
381[svelte devtools]: https://github.com/RedHatter/svelte-devtools
382[nightwatch.js]: https://nightwatchjs.org
383[tslint]: https://palantir.github.io/tslint
384[eslint]: https://eslint.org
385[graphql]: https://graphql.org
386[sass]: https://sass-lang.com
387[less]: http://lesscss.org
388[lerna]: https://lerna.js.org
389[workbox]: https://developers.google.com/web/tools/workbox
390[ant-design]: https://ant.design
391[allsure]: http://allure.qatools.ru
392[bootstrap]: https://getbootstrap.com
393[material]: https://material.io
394[cucumber]: https://cucumber.io
395[cypress]: https://www.cypress.io
396[webhint]: https://www.webhint.io
397[testcafe]: https://devexpress.github.io/testcafe/
398[robotframework]: https://robotframework.org
399[tailwindcss]: https://tailwindcss.com
400[postcss]: https://postcss.org
401[esbuild]: https://esbuild.github.io
402[snowpack]: https://www.snowpack.dev/
403[vite]: https://vitejs.dev/
404[openapi]: https://openapis.org
405[nexus iq]: https://blog.sonatype.com/using-nexus-iq-server-with-webpack