web config

@appnest/web-config

Конфигурация подзора, которая поможет вам создать современные веб -приложения.
_{Конфигурация очень хорошо работает с Libraries Lit-HTML и Lit-Element. Я хотел поделиться этим, чтобы вы тоже могли его использовать или построить.}

• Расширяемый create-rollup-config.js для использования Rollup с сладкими функциями, например, импорт SCSS, генерация сервисных работников с рабочей коробкой, живой перезагрузкой, преодолением ресурсов, подготовки к традициям, пролетам, типовым, министерству производства и сжатием с помощью Brotli и Gzip.
• Расширимый create-karma-config.js чтобы помочь с настройкой тестирования кармы
• Файл tsconfig.json для настройки вашего TypeScript
• Файл tslint.json для настройки вашего снимка
• Файл typings.d.ts для настройки ваших типов
• Файл .browserslistrc
• Файл .gitignore , который вы можете использовать в качестве вдохновения для своего собственного .gitignore файла
• rollup-plugin-compress -плагин Rollup, который сжимает файлы в пакете после строительства
• rollup-plugin-copy -плагин Rollup, который копирует ресурсы из одного места в другое
• rollup-plugin-html-template -плагин ROLLUP, который вводит точки ввода пакета в HTML-файл
• rollup-plugin-import-styles -плагин ROLLUP, который позволяет импортировать файлы в стиле с использованием PostCSS
• rollup-plugin-live-reload -плагин Rollup, который живые файлы перезагрузки при изменении
• rollup-plugin-minify-lit-html -плагин ROLLUP, который минифмер Lit-HTML-шаблоны
• rollup-plugin-replace -плагин Rollup, который заменяет импорт на другой импорт
• rollup-plugin-workbox -плагин Rollup, который использует Workbox для генерации обслуживающего работника
• rollup-plugin-budget -плагин Rollup, который сравнивает размеры файлов с указанным бюджетом
• rollup-plugin-clean -плагин Rollup, который чистые каталоги перед восстановлением

➤ Соблюдение

• ➤ Шаг 1 - Установка
• ➤ Шаг 2 - Настройка rollup.config.ts
• ➤ Шаг 3 - Настройка .eslintrc.json
• ➤ Шаг 4 - Настройка tsconfig.json
• ➤ Шаг 5 - Настройка .browserslistrc
• ➤ Шаг 6 - Настройка karma.conf.js
• ➤ Шаг 7 - Добавьте сценарии запуска и строительства в package.json
• ➤ Шаг 8 - Настройка prettier.config.js
• ➤ Как загрузить таблицы стилей
  • Добавьте следующее в свой файл typings.d.ts !
  • Загрузите мировую таблицу стилей (она будет добавлена ​​в файл шаблона)
  • Загрузите таблицу стиля как строку
• Speakers
• ➤ Лицензия

➤ Шаг 1 - Установка

Самый быстрый способ начать - использовать CLI. Запустите следующую команду, чтобы настроить свой проект с нуля. Если вы решите использовать CLI, вы можете пропустить остальные шаги в этом файле Readme.

 $ npm init web - config new < dir >

Чтобы использовать его в своем проекте, вы можете установить его так.

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

➤ Шаг 2 - Настройка rollup.config.ts

Вот пример того, как может выглядеть ваш файл конфигурации Rollup:

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

➤ Шаг 3 - Настройка .eslintrc.json

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

➤ Шаг 4 - Настройка tsconfig.json

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

➤ Шаг 5 - Настройка .browserslistrc

Инструменты, транспортирующие ваш код, используют browserslist , чтобы выяснить, что поддерживается. Ваш .browserslistrc может выглядеть так.

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

➤ Шаг 6 - Настройка karma.conf.js

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

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

➤ Шаг 7 - Добавьте сценарии запуска и строительства в package.json

Здесь пример того, какие сценарии вы можете добавить в свой файл 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"
    ...
  }
  ...
}

➤ Шаг 8 - Настройка prettier.config.js

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

➤ Как загрузить таблицы стилей

Добавьте следующее в свой файл typings.d.ts !

Это сделано для того, чтобы TypeScript не жаловался на SCSS, CSS и JSON Imports.

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

Загрузите мировую таблицу стилей (она будет добавлена ​​в файл шаблона)

Шаг 1: Импортируйте таблицу стилей, используя синтаксис импорта ES6

 import "./main.scss" ;

Шаг 2: Нажмите название таблицы стиля в конфигурации в розыгрыше

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

Загрузите таблицу стиля как строку

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

Speakers

Андреас Мелсен	Ты?

➤ Лицензия

Лицензирован в соответствии с MIT.