web config

@appnest/web-config

Una configuración de acurrucado para ayudarlo a crear aplicaciones web modernas.
_{La configuración funciona extremadamente bien con las bibliotecas lit-html y lit-elemento. Quería compartirlo para que pueda usarlo también o construir sobre él.}

• Un extensible create-rollup-config.js para usar rollup con características dulces, como, por ejemplo, las importaciones de SCSS, la generación de trabajadores de servicios con caja de trabajo, recarga en vivo, recursos de afrontamiento, fragmentación, treeschoking, mecanografiado, minificación de producción y compresión con Brotli y GZIP.
• Un extensible create-karma-config.js para ayudar con la configuración de las pruebas de karma
• Un archivo tsconfig.json para configurar su mecanografiado
• Un archivo tslint.json para configurar su pelusa
• Un archivo typings.d.ts para configurar sus tipos
• Un archivo .browserslistrc para configurar cómo se transpilan sus archivos
• Un archivo .gitignore que puede usar como inspiración para su propio archivo .gitignore
• rollup-plugin-compress : un complemento de rollo que comprime los archivos en el paquete después de la construcción
• rollup-plugin-copy : un complemento de rollo que copia los recursos de una ubicación a otra
• rollup-plugin-html-template : un complemento de rollo que inyecta los puntos de entrada del paquete en un archivo HTML
• rollup-plugin-import-styles : un complemento de rollo que permite importar archivos de estilo utilizando postcss
• rollup-plugin-live-reload : un complemento de rollup que se realiza en vivo a medida que cambia
• rollup-plugin-minify-lit-html : un complemento de rollo que minifica plantillas de html lit-html
• rollup-plugin-replace : un complemento de rollo que reemplaza una importación con otra importación
• rollup-plugin-workbox : un complemento de rollo que utiliza la caja de trabajo para generar un trabajador de servicio
• rollup-plugin-budget : un complemento de rollo que compara los tamaños de los archivos con un presupuesto especificado
• rollup-plugin-clean : un complemento de rollo que limpia los directorios antes de la reconstrucción

➤ Tabla de contenido

• ➤ Paso 1 - Instalación
• ➤ Paso 2 - Configurar rollup.config.ts
• ➤ Paso 3 - Configuración .eslintrc.json
• ➤ Paso 4 - Configurar tsconfig.json
• ➤ Paso 5 - Configuración .browserslistrc
• ➤ Paso 6 - Configurar karma.conf.js
• ➤ Paso 7: agregue scripts de inicio y creación a package.json
• ➤ Paso 8 - Configurar prettier.config.js
• ➤ Cómo cargar hojas de estilo
  • ¡Agregue lo siguiente a su archivo typings.d.ts !
  • Cargar una hoja de estilo global (se agregará al archivo de plantilla)
  • Cargue una hoja de estilo como una cadena
• ➤ Colaboradores
• ➤ Licencia

➤ Paso 1 - Instalación

La forma más rápida de comenzar es usar la CLI. Ejecute el siguiente comando para configurar su proyecto desde cero. Si elige usar la CLI, puede omitir el resto de los pasos en este archivo ReadMe.

 $ npm init web - config new < dir >

Para usarlo en su proyecto, puede instalarlo así.

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

➤ Paso 2 - Configurar rollup.config.ts

Aquí hay un ejemplo sobre cómo podría verse su archivo de configuración de rollo:

 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"
} 

➤ Paso 3 - Configuración .eslintrc.json

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

➤ Paso 4 - Configurar tsconfig.json

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

➤ Paso 5 - Configuración .browserslistrc

Las herramientas que transportan su código están utilizando browserslist para descubrir qué es compatible. Tu .browserslistrc podría verse así.

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

➤ Paso 6 - Configurar karma.conf.js

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

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

➤ Paso 7: agregue scripts de inicio y creación a package.json

Aquí un ejemplo sobre qué scripts podría agregar a su archivo package.json .

 {
  ...
  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"
    ...
  }
  ...
}

➤ Paso 8 - Configurar prettier.config.js

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

➤ Cómo cargar hojas de estilo

¡Agregue lo siguiente a su archivo typings.d.ts !

Esto es para hacer que TypeScript no se queje de las importaciones SCSS, CSS y JSON.

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

Cargar una hoja de estilo global (se agregará al archivo de plantilla)

Paso 1: importe su hoja de estilo utilizando la sintaxis de importación de ES6

 import "./main.scss" ;

Paso 2: incluya el nombre de la hoja de estilo en su configuración de rollup

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

Cargue una hoja de estilo como una cadena

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

➤ Colaboradores

Andreas Mehlsen	¿Tú?

➤ Licencia

Licenciado bajo MIT.