Wondering what’s next for npm?Check out our public roadmap! »

    @leanup/cli

    1.1.11 • Public • Published


    Make things pure ... to become lean.


    downloads npm license

    dependencies devDependencies peerDependencies optionalDependencies

    vulnerabilities install-size

    lernajs prettier

    leanup CLI

    The @leanup CLI contains all required popular tools in there minimal default, transparent and extensible configuration to develop JavaScript/TypeScript web applications.

    Motivation

    • Learnability
    • Controllability
    • Universality
    • Flexibility
    • Scalability
    • Durability
    • Transparency

    Principles

    • convention over configuration
    • pure commands under the hood
    • don't repeat yourself
    • following the generic instead of the influenced way
    • keep the dependencies always up to date

    Demo

    There are some working examples:

    Installation

    To install the @leanup CLI execute the following command:

    npm install @leanup/cli typescript --save-dev

    And a non-framework or framework strategy must also be selected:

    Non-framework:

    npm install @leanup/cli-vanilla --save-dev

    Or with framework:

    npm install @leanup/cli-angular --save-dev or
    npm install @leanup/cli-angularjs --save-dev or
    npm install @leanup/cli-aurelia --save-dev or
    npm install @leanup/cli-inferno --save-dev or
    npm install @leanup/cli-lit-element --save-dev or
    npm install @leanup/cli-preact --save-dev or
    npm install @leanup/cli-react --save-dev or
    npm install @leanup/cli-svelte --save-dev or
    npm install @leanup/cli-vue --save-dev or
    npm install @leanup/cli-vue3 --save-dev

    Install the peer dependencies chromedriver, geckodriver or selenium-server in the required version, if you need that features.

    • npm install chromedriver --save-dev
    • npm install geckodriver --save-dev
    • npm install selenium-server--save-dev

    Features

    Tool/Technology Description Status Note
    Babel Transpiler ✔️ ready
    Webpack Bundler ✔️ ready
    Snowpack Bundler in progress
    Vite Bundler in progress
    TypeScript Language ✔️ ready
    Mocha Unit-Test-Runner ✔️ ready
    Chai Assertion ✔️ ready
    Sinon Mocking ✔️ ready
    NYC Code-Coverage ✔️ ready
    ESLint Code-Checker ✔️ ready
    Nightwatch.js E2E-Test-Runner ✔️ ready
    Allsure Report ✔️ ready
    Cucumber BDD ✔️ ready
    robotframework BDD will be evaluated
    Storybook Documentation in progress
    GraphQL API ✔️ ready
    Workbox PWA ✔️ ready
    Lerna Mono-Repo ✔️ ready
    Ant-Design Design-System ✔️ proved
    Material Design-System ✔️ proved
    Bootstrap Design-System ✔️ proved
    Tailwindcss Design-System ✔️ proved
    Nexus IQ Vulnerabiliy-Gate ✔️ ready
    Less CSS ✔️ ready
    Sass CSS ✔️ ready
    PostCSS CSS ✔️ ready
    Webhint Webhint ✔️ moved ***
    TestCafe E2E-Test-Runner will be evaluated ****
    TSLint Code-Checker removed **
    Cypress E2E-Test-Runner excluded *

    * Arguments agains Cypress:

    • reinvent wheel
      • detect css selectors
      • BDD test syntax
      • principals
    • large tooling
    • a lot of binaries
    • many dependencies
    • ci integration vs selenium hub

    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.

    ** TSLint is deprecated.

    *** 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.

    **** 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.

    Structure

    Vanilla Java-/TypeScript are supported by default. That means for example custom elements and any plain Java-/TypeScript code.

    Frameworks

    Vanilla Java-/TypeScript are supported by default. That means for example custom elements and any plain Java-/TypeScript code.

    The selection of the following frameworks depends in parts on the following references:

    Currently the following framework extensions are available:

    Extensions

    A separate package contains some nice but not required addons for webpack.

    Thinks

    There a separate packages for important application features.

    Usage

    If the CLI is also installed globally with npm install -g @leanup/cli, you can use the command lean directly in the bash.

    If not, you must use npx and put it before the command. Like this: npx lean

    Help

    > lean -h (or npx lean -h)

    Create

    > lean create -h (or npx lean create -h)

    Developing

    > lean serve -h (or npx lean serve -h)

    Building

    > lean build -h (or npx lean build -h)

    Unit-Testing

    > lean test -h (or npx lean test -h)

    Test-Coverage

    > lean coverage -h (or npx lean coverage -h)

    E2E-Testing

    > lean e2e -h (or npx lean e2e -h)

    Formatter

    > lean format -h (or npx lean format -h)

    Linter

    > lean lint -h (or npx lean lint -h)

    Replaced environment variables

    The following variable names are replaced by the values from package.json file in the bundle:

    Name Description
    APP_AUTHER The value of the author attribute from the package.json file.
    APP_HOMEPAGE The value of the homepage attribute from the package.json file.
    APP_NAME The value of the name attribute from the package.json file.
    APP_VERSION The value of the version attribute from the package.json file.
    NODE_ENV The value of the version attribute from the package.json file.

    For example:

    package.json:

    {
      "name": "@scope/my-app",
      "version": "1.1.0",
      "description": "This CLI brings along all required tools to serve, test and build multi framework SPAs",
      "author": "Martin Oppitz <npmjs@martinoppitz.com>",
      "homepage": "https://leanupjs.org",
      ...

    App code:

    const APP_METADATA = {
      author: '$$APP_AUTHER$$',
      homepage: '$$APP_HOMEPAGE$$',
      name: '$$APP_NAME$$',
      version: '$$APP_VERSION$$',
      environment: '$$NODE_ENV$$', // development | test | production ⌛
    };
    console.log(APP_METADATA);

    Dependencies

    Package Size Vulnerabilities
    @babel/core install size of @babel/core vulnerabilities of @babel/core
    @babel/plugin-proposal-class-properties install size of @babel/plugin-proposal-class-properties vulnerabilities of @babel/plugin-proposal-class-properties
    @babel/plugin-proposal-decorators install size of @babel/plugin-proposal-decorators vulnerabilities of @babel/plugin-proposal-decorators
    @babel/preset-env install size of @babel/preset-env vulnerabilities of @babel/preset-env
    @babel/preset-typescript install size of @babel/preset-typescript vulnerabilities of @babel/preset-typescript
    @types/node install size of @types/node vulnerabilities of @types/node
    autoprefixer install size of chai vulnerabilities of autoprefixer
    babel-loader install size of babel-loader vulnerabilities of babel-loader
    chalk install size of chai vulnerabilities of chalk
    commander install size of commander vulnerabilities of commander
    copy-modules-webpack-plugin install size of copy-modules-webpack-plugin vulnerabilities of copy-modules-webpack-plugin
    css-loader install size of css-loader vulnerabilities of css-loader
    esbuild-loader install size of esbuild-loader vulnerabilities of esbuild-loader
    file-loader install size of file-loader vulnerabilities of file-loader
    less install size of less vulnerabilities of less
    less-loader install size of less-loader vulnerabilities of less-loader
    postcss install size of postcss vulnerabilities of postcss
    postcss-loader install size of postcss-loader vulnerabilities of postcss-loader
    sass install size of sass vulnerabilities of sass
    sass-loader install size of sass-loader vulnerabilities of sass-loader
    string-replace-loader install size of string-replace-loader vulnerabilities of string-replace-loader
    style-loader install size of style-loader vulnerabilities of fibers
    webpack install size of webpack vulnerabilities of webpack
    webpack-cli install size of webpack-cli vulnerabilities of webpack-cli
    webpack-dev-server install size of webpack-dev-server vulnerabilities of webpack-dev-server

    Peer dependencies

    Package Size Vulnerabilities
    chromedriver install size of chromedriver vulnerabilities of chromedriver
    geckodriver install size of geckodriver vulnerabilities of geckodriver
    graphql install size of graphql vulnerabilities of graphql
    selenium-server install size of selenium-server vulnerabilities of selenium-server
    typescript install size of typescript vulnerabilities of typescript

    Optional tools

    Package Size Vulnerabilities
    @leanup/git-hooks install size of @leanup/git-hooks vulnerabilities of @leanup/git-hooks
    allure-commandline install size of allure-commandline vulnerabilities of allure-commandline
    lerna install size of lerna vulnerabilities of lerna
    workbox-cli install size of workbox-cli vulnerabilities of workbox-cli

    Install

    npm i @leanup/cli

    DownloadsWeekly Downloads

    3,734

    Version

    1.1.11

    License

    Apache-2.0

    Unpacked Size

    143 kB

    Total Files

    70

    Homepage

    leanupjs.org

    Last publish

    Collaborators

    • avatar