web config

@Appnest/Web-Config

Eine Rollup -Konfiguration, mit der Sie moderne Webanwendungen erstellen können.
_{Die Konfiguration funktioniert sehr gut mit den Bibliotheken Lit-HTML und Lit-Element. Ich wollte es teilen, damit Sie es auch verwenden oder darüber aufbauen können.}

• Ein erweiterbares create-rollup-config.js für die Verwendung von Rollup mit süßen Funktionen wie SCSS-Importe, Servicearbeitergenerierung mit Workbox, Live-Nachladen, Bewältigungsressourcen, Chunking, Treeshaking, Typscript, Produktionsminiaturen und Kompression mit Brotli und GZIP.
• Ein erweiterbares create-karma-config.js um bei Ihrem Karma-Test-Setup zu helfen
• Eine tsconfig.json -Datei zum Konfigurieren Ihres TypsScripts
• Eine tslint.json -Datei zum Konfigurieren Ihrer Linie
• Eine typings.d.ts Datei zum Konfigurieren Ihrer Typierungen
• Eine .browserslistrc -Datei, um zu konfigurieren, wie Ihre Dateien transpiliert werden
• Eine .gitignore -Datei, die Sie als Inspiration für Ihre eigene .gitignore -Datei verwenden können
• rollup-plugin-compress -Ein Rollup-Plugin, das die Dateien im Bundle nach dem Erstellen komprimiert
• rollup-plugin-copy -Ein Rollup-Plugin, das Ressourcen von einem Ort zum anderen kopiert
• rollup-plugin-html-template -Ein Rollup-Plugin, das die Bündeleintragspunkte in eine HTML-Datei injiziert
• rollup-plugin-import-styles
• rollup-plugin-live-reload -Ein Rollup-Plugin, das Live-Nachladen von Dateien bei der Änderung
• rollup-plugin-minify-lit-html -Ein Rollup-Plugin, das Lit-HTML-Vorlagen abgibt
• rollup-plugin-replace -Ein Rollup-Plugin, das einen Import durch einen anderen Import ersetzt
• rollup-plugin-workbox -Ein Rollup-Plugin, mit dem Workbox einen Servicearbeiter generiert
• rollup-plugin-budget -Ein Rollup-Plugin, das die Größen der Dateien mit einem bestimmten Budget vergleicht
• rollup-plugin-clean -Ein Rollup-Plugin, das Verzeichnisse vor dem Wiederaufbau reinigt

➤ Inhaltsverzeichnis

• ➤ Schritt 1 - Installation
• ➤ Schritt 2 - Setup rollup.config.ts
• ➤ Schritt 3 - Setup .eslintrc.json
• ➤ Schritt 4 - Setup tsconfig.json einrichten
• ➤ Schritt 5 - .browserslistrc SETUP
• ➤ Schritt 6 - Setup karma.conf.js einrichten
• ➤ Schritt 7 - Fügen Sie Start- und Erstellen von Skripten zu package.json hinzu
• ➤ Schritt 8 - Setup prettier.config.js
• ➤ So laden Sie Stylesheets
  • Fügen Sie Folgendes zu Ihrer Datei typings.d.ts hinzu!
  • Laden Sie ein globales Stylesheet (es wird der Vorlagendatei hinzugefügt)
  • Laden Sie ein Stylesheet als Zeichenfolge
• ➤ Mitwirkende
• ➤ Lizenz

➤ Schritt 1 - Installation

Der schnellste Weg, um zu beginnen, besteht darin, die CLI zu verwenden. Führen Sie den folgenden Befehl aus, um Ihr Projekt von Grund auf neu einzurichten. Wenn Sie die CLI verwenden, können Sie den Rest der Schritte in dieser Readme -Datei überspringen.

 $ npm init web - config new < dir >

Um es in Ihrem Projekt zu verwenden, können Sie es so installieren.

 $ npm i @ appnest / web - config -- D 

➤ Schritt 2 - Setup rollup.config.ts

Hier ist ein Beispiel, wie Ihre Rollup -Konfigurationsdatei aussehen könnte:

 import { resolve , join } from "path" ;
import pkg from "./package.json" ;
import {
  defaultExternals ,
  defaultOutputConfig ,
  defaultPlugins ,
  defaultProdPlugins ,
  defaultServePlugins ,
  isLibrary ,
  isProd ,
  isServe
} from "@appnest/web-config" ;

const folders = {
  dist : resolve ( __dirname , "dist" ) ,
  src : resolve ( __dirname , "src/demo" ) ,
  src_assets : resolve ( __dirname , "src/demo/assets" ) ,
  dist_assets : resolve ( __dirname , "dist/assets" )
} ;

const files = {
  main : join ( folders . src , "main.ts" ) ,
  src_index : join ( folders . src , "index.html" ) ,
  dist_index : join ( folders . dist , "index.html" )
} ;

export default {
  input : {
    main : files . main
  } ,
  output : [
    defaultOutputConfig ( {
      dir : folders . dist ,
      format : "esm"
    } )
  ] ,
  plugins : [
    ... defaultPlugins ( {
      copyConfig : {
        resources : [ [ folders . src_assets , folders . dist_assets ] ] ,
      } ,
      cleanerConfig : {
        targets : [
          folders . dist
        ]
      } ,
      htmlTemplateConfig : {
        template : files . src_index ,
        target : files . dist_index ,
        include : / main(-.*)?.js$ /
      } ,
      importStylesConfig : {
        globals : [ "main.scss" ]
      }
    } ) ,

    // Serve
    ... ( isServe ? [
        ... defaultServePlugins ( {
            dist : folders . dist
        } )
    ] : [ ] ) ,

    // Production
    ... ( isProd ? [
        ... defaultProdPlugins ( {
            dist : folders . dist
        } )
    ] : [ ] )
  ] ,
  treeshake : isProd ,
  context : "window"
} 

➤ Schritt 3 - Setup .eslintrc.json

{
  "extends" : " ./node_modules/@appnest/web-config/eslint.js "
}

➤ Schritt 4 - Setup tsconfig.json einrichten

{
  "extends" : " ./node_modules/@appnest/web-config/tsconfig.json "
}

➤ Schritt 5 - .browserslistrc SETUP

Die Tools, die Ihren Code transportieren, verwenden browserslist , um herauszufinden, was unterstützt wird. Ihr .browserslistrc könnte so aussehen.

 last 2 Chrome versions
last 2 Safari versions
last 2 Firefox versions

➤ Schritt 6 - Setup karma.conf.js einrichten

 const { defaultResolvePlugins , defaultKarmaConfig } = require ( "@appnest/web-config" ) ;

module . exports = ( config ) => {
  config . set ( {
    ... defaultKarmaConfig ( {
      rollupPlugins : defaultResolvePlugins ( )
    } ) ,
    basePath : "src" ,
    logLevel : config . LOG_INFO
  } ) ;
} ; 

➤ Schritt 7 - Fügen Sie Start- und Erstellen von Skripten zu package.json hinzu

Hier ein Beispiel, welche Skripte Sie zu Ihrer package.json -Datei hinzufügen können.

 {
  ...
  scripts: {
    "b:dev": "rollup -c --environment NODE_ENV:dev",
    "b:prod": "rollup -c --environment NODE_ENV:prod",
    "s:dev": "rollup -c --watch --environment NODE_ENV:dev",
    "s:prod": "rollup -c --watch --environment NODE_ENV:prod",
    "s": "npm run s:dev"
    ...
  }
  ...
}

➤ Schritt 8 - Setup prettier.config.js

 module . exports = {
   ... require ( "../node_modules/@appnest/web-config/rettier.config.js" )
} ; 

➤ So laden Sie Stylesheets

Fügen Sie Folgendes zu Ihrer Datei typings.d.ts hinzu!

Damit sich Typenkript nicht über SCSS, CSS und JSON -Importe beschweren.

 /// <reference path="node_modules/@appnest/web-config/typings.d.ts" />

Laden Sie ein globales Stylesheet (es wird der Vorlagendatei hinzugefügt)

Schritt 1: Importieren Sie Ihr Stylesheet mit der ES6 -Importsyntax

 import "./main.scss" ;

Schritt 2: Fügen Sie den Namen des Stylesheet in Ihre Rollup -Konfiguration auf

 export default {
  ...
    defaultPlugins ( {
       ...
       importStylesConfig : {
         globals : [ "main.scss" ]
       } ,
       ...
    } ) ,
  ...
}

Laden Sie ein Stylesheet als Zeichenfolge

 import css from "./my-component.scss" ; 

➤ Mitwirkende

Andreas Mehlsen	Du?

➤ Lizenz

Lizenziert unter MIT.