{"id":15138747,"url":"https://github.com/intecmedia/intecmedia.webpack","last_synced_at":"2025-08-12T05:15:32.718Z","repository":{"id":38279586,"uuid":"80391250","full_name":"Intecmedia/Intecmedia.Webpack","owner":"Intecmedia","description":"webpack bootsrap boilerplate ","archived":false,"fork":false,"pushed_at":"2025-08-10T06:32:59.000Z","size":34945,"stargazers_count":13,"open_issues_count":8,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-10T07:13:54.786Z","etag":null,"topics":["babel","boilerplate","bootstrap","es2015","es6","eslint","imagemin","nunjucks","postcss","scss","stylelint","svgo","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Intecmedia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-01-30T03:34:15.000Z","updated_at":"2025-08-10T06:32:43.000Z","dependencies_parsed_at":"2023-10-20T07:45:32.522Z","dependency_job_id":"c49521c6-0ffd-4629-88d5-d01eeaa651d8","html_url":"https://github.com/Intecmedia/Intecmedia.Webpack","commit_stats":{"total_commits":4237,"total_committers":5,"mean_commits":847.4,"dds":"0.0037762567854614515","last_synced_commit":"dd8ebe925990ea73f03704b00af310d8f48af904"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/Intecmedia/Intecmedia.Webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intecmedia%2FIntecmedia.Webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intecmedia%2FIntecmedia.Webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intecmedia%2FIntecmedia.Webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intecmedia%2FIntecmedia.Webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Intecmedia","download_url":"https://codeload.github.com/Intecmedia/Intecmedia.Webpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intecmedia%2FIntecmedia.Webpack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270005591,"owners_count":24510939,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","boilerplate","bootstrap","es2015","es6","eslint","imagemin","nunjucks","postcss","scss","stylelint","svgo","webpack"],"created_at":"2024-09-26T07:44:16.790Z","updated_at":"2025-08-12T05:15:32.685Z","avatar_url":"https://github.com/Intecmedia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Intecmedia Webpack Boilerplate\n\nЭто внутренний стандарт/шаблон для верстки сайтов [Pitcher Agency](https://pitcher.agency/)\n\n## Цель шаблона: минимальные натройки – максимальная автоматизация процесса сборки и защита от ошибок.\n\nПредложения и замечания приветствуются в разделе [Issues](https://github.com/Intecmedia/Intecmedia.Webpack/issues/new)\nили [Pull requests](https://github.com/intecmedia/Intecmedia.Webpack/pulls).\n\n## Особености\n\n-   Webpack 5.\n-   Bootstrap 5.\n-   Babel и [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env).\n-   TypeScript через [babel-preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)\n-   Шаблонизатор [Nunjucks](https://mozilla.github.io/nunjucks/) для сборки HTML.\n-   SCSS, autoprefixer, PostCSS: [autoprefixer](https://github.com/postcss/autoprefixer),\n    [cssnano](http://cssnano.co/).\n-   Базовая WYSIWYG-типографика текста, форм, таблиц, списков, заголовков:\n    [wysiwyg.scss](https://github.com/Intecmedia/Intecmedia.Webpack/blob/master/source/css/base/_wysiwyg.scss).\n-   Ресайз изображений через [Sharp](https://sharp.pixelplumbing.com/).\n-   Множество линтеров: eslint, html-validate, stylelint с возможностью autofix кода.\n-   Imagemin для сжатия гарфики: svg, png, jpeg, gif.\n-   Генерация множества app-иконок и manifest.json.\n-   Активное использование формат изображений WebP.\n\n## Системные требования\n\n-   `Node.js` \u003e= 20 c включеным [`Chocolatey`](https://user-images.githubusercontent.com/3109072/68096791-82350c00-fe89-11e9-8cfa-b4619ce96162.jpg)\n-   `NPM` \u003e= 10 (обновляется командой `npm install -g npm`)\n-   `python` \u003e= 2.7 и `pip` (автоматически ставятся вместе с `Chocolatey`)\n-   Если у вас `Windows` – установите любой `bash`: `Git Bash` или `MinGW` или `Cygwin`\n-   ВНИМАНИЕ! `Yarn` и `PnPM`  – запрещен, все скрипты расчитаны только на `NPM`.\n\n## Начало работы\n\n-   Отредактируйте файл `app.config.js`, разделы `TITLE`, `SHORT_NAME` и `DESCRIPTION`.\n-   Отредактируйте файл `package.json`, разделы `name`.\n-   Запустите линтер конфигурации приложения: `npm run app-lint`.\n\n## Обзор комманд\n\n-   **npm run development** – сборка в development-режиме и debug=off, самый быстрый способ.\n-   **npm run debug** – сборка в development-режиме и debug=on, медленный способ.\n-   **npm run prod** – сборка в production-режиме (с линтерами) и debug=off, самый медленный способ.\n-   **npm run prod-debug** – сборка в production-режиме (с линтерами) и debug=on, самый медленный способ.\n-   **npm run production** – сборка в production-режиме (без линтеров) и debug=off, самый медленный способ.\n-   **npm run watch** – watch в production-режимеи debug=off, самый медленный способ.\n-   **npm run watch-dev** – watch в development-режиме и debug=off, самый быстрый способ.\n-   **npm run watch-debug** – watch в development-режиме и debug=on, медленный способ.\n-   **npm run js-lint** – линтер js через [eslint](https://eslint.org/).\n-   **npm run js-lint-config** – печатает конфиг(для browser) [eslint](https://eslint.org/).\n-   **npm run js-lint-config-node** – печатает конфиг(для node) [eslint](https://eslint.org/).\n-   **npm run css-lint** – линтер scss через [stylelint](https://stylelint.io/).\n-   **npm run css-lint-config** – печатает конфиг [stylelint](https://stylelint.io/).\n-   **npm run html-validate** – линтер html(prod) через [html-validate](https://html-validate.org/).\n-   **npm run html-validate-dev** – линтер html (dev) через [html-validate](https://html-validate.org/).\n-   **npm run html-validator** – линтер html через [validator.w3.org](https://validator.w3.org/).\n-   **npm run html-beautify** – форматер html через [https://beautifier.io](https://beautifier.io/).\n-   **npm run html-typograf** – форматер html через [https://typograf.github.io/](https://typograf.github.io/).\n-   **npm run app-lint** – линтер конфигурации приложения.\n-   **npm run image-lint** – линтер изображений\n-   **npm run lint** – запуск всех линтеров (app, eslint, stylelint, html-validate, validator.w3.org).\n-   **npm run server** – сервер в production-режиме и debug=off, самый медленный способ.\n-   **npm run server-https** – https-сервер в production-режиме и debug=off, самый медленный способ.\n-   **npm run server-dev** – сервер в development-режиме и debug=off, самый быстрый способ.\n-   **npm run server-debug** – сервер в development-режиме и debug=on, медленный способ.\n-   **npm run server-debug-https** – https-сервер в development-режиме и debug=on, медленный способ.\n-   **npm run build** – релизный билд, запускается в production-режиме и debug=off, включая все линтеры, очень медленный способ.\n-   **npm run browserslist-dev** – список поддерживаемых браузеров для NODE_ENV=development.\n-   **npm run browserslist-prod** – список поддерживаемых браузеров для NODE_ENV=production.\n-   **npm run browserslist** – список поддерживаемых браузеров.\n-   **npm run fonts-subsets** – запуск fonts subseting.\n-   **npm run svgo** – минимизая svg-файлов.\n-   **npm run filename-lint** – линтер имён файлов.\n-   **npm run production -- --env=verbose** – verbose режим\n-   **npm run lint-staged** – запуск lint-staged\n-   **npm run prepare** – установка git-хуков\n\n### Часто используемые команды\n\n-   **npm run js-lint** – линтер js через [eslint](https://eslint.org/).\n-   **npm run css-lint** – линтер scss через [stylelint](https://stylelint.io/).\n-   **npm run watch-dev** – watch в development-режиме и debug=off, самый быстрый способ.\n-   **npm run server** – сервер в development-режиме и debug=off, самый быстрый способ.\n-   **npm run server-https** – https-сервер в development-режиме и debug=off, самый быстрый способ.\n-   **npm run build** – релизный билд, запускается в production-режиме и debug=off, включая все линтеры, очень медленный способ.\n\n## Стилистика кода\n\n-   JS основна на [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) ([перевод](https://github.com/leonidlebedev/javascript-airbnb)).\n-   CSS использум БЭМ, как метод именования селекторов (исключение – сторонние css-пакеты) ([список рекомендаций по БЭМ](https://nicothin.pro/idiomatic-pre-CSS/)).\n-   SCSS основна на [stylelint-config-sass-guidelines](https://sass-guidelin.es/ru/).\n-   HTML проверяется через [html-validate](https://html-validate.org/) и [validator.w3.org](https://validator.w3.org/).\n-   Подробно писать про оформление кода нет смысла – сборка покрыта линтерами.\n\n### Структура важных блоков (Schema.org)\n\n-   [Адреса и Организации](http://help.yandex.ru/webmaster/supported-schemas/address-organization.xml)\n-   [Вопросы и Ответы](http://help.yandex.ru/webmaster/supported-schemas/questions.xml)\n-   [Товары и Цены](http://help.yandex.ru/webmaster/supported-schemas/goods-prices.xml)\n-   [Картинки](http://help.yandex.ru/webmaster/supported-schemas/image.xml)\n\n## Полифилы\n\n-   [:focus-visible](https://github.com/WICG/focus-visible)\n-   [ResizeObserver](https://github.com/que-etc/resize-observer-polyfill)\n-   [SubmitEvent.submitter](https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter)\n-   [FormData.submitter](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData#submitter)\n\n## Типографика\n\n### Responstive type\n\n1. [старыей способ через @media](https://github.com/Intecmedia/Intecmedia.Webpack/wiki/%D0%A0%D0%B5%D1%81%D0%BF%D0%BE%D0%BD%D0%B7%D0%B8%D0%B2-%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0#%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-media-%D0%BE%D1%80%D0%B8%D0%B3%D0%B8%D0%BD%D0%B0%D0%BB-%D0%BD%D0%B0-css-trickscom)\n2. [предпочтительный способ через clamp](https://github.com/Intecmedia/Intecmedia.Webpack/wiki/%D0%A0%D0%B5%D1%81%D0%BF%D0%BE%D0%BD%D0%B7%D0%B8%D0%B2-%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0#%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-clamp-%D0%BE%D1%80%D0%B8%D0%B3%D0%B8%D0%BD%D0%B0%D0%BB-%D0%BD%D0%B0-css-trickscom)\n\n### WYSIWYG\n\nБлоки **user generated content** (теги типографики **без классов и стилей**),\nдолжны быть обвернуты в css-класс [wysiwyg](https://github.com/Intecmedia/Intecmedia.Webpack/blob/master/source/css/pages/_wysiwyg.scss), пример:\n\n-   текст новости/статьи/описание товара, исключая оформление этих блоков.\n-   блоки созданые CMS и [WYSIWYG-редактороми](https://ru.wikipedia.org/wiki/CKeditor).\n\n### Оптимизация шрифтов\n\n-   Мы используем только 3 формата: `ttf`, `woff`, `woff2`. Устаревшими считаются: `eot` и `svg`.\n-   Мы используем [fonttools](https://github.com/fonttools/fonttools).\n-   Для fonttools требуется python в системе: `pip install fonttools` и возможно `pip install brotli`.\n-   Исходники шрифтов только формате `ttf`, должны лежать в директории `source/fonts/src-ttf`.\n-   `npm run fonts-subsets` – запуск fonts subseting.\n-   Автоматически добавляется `font-display: swap;` плагин [`postcss-font-display`](https://github.com/dkrnl/postcss-font-display).\n\n## Изображения\n\n### Imagemin\n\n-   Конфиг imagemin находится `imagemin.config.js`.\n-   Конфиг SVGO находится `svgo.config.js`.\n\n### Webp\n\n-   Автоматический WebP для всех изображений(png, jpg, jpeg) внутри стилей, пример:\n\n```css\n/* before */\n.test {\n    background-image: url(\"test.png\");\n}\n/* after */\n.test {\n    background-image: url(\"test.png\");\n}\nhtml.webp .test {\n    background-image: url(\"test.webp\");\n}\n```\n\n### Avif\n\n-   Автоматический Avif для всех изображений(png, jpg, jpeg) внутри стилей, пример:\n\n```css\n/* before */\n.test {\n    background-image: url(\"test.png\");\n}\n/* after */\n.test {\n    background-image: url(\"test.png\");\n}\nhtml.avif .test {\n    background-image: url(\"test.avif\");\n}\n```\n\n### Favicons и App Icons\n\n-   Мы используем [favicons-webpack-plugin](https://github.com/jantimon/favicons-webpack-plugin).\n-   Файл `.favicons-source.svg` исходник favicons.\n-   `THEME_COLOR` редактируется в `app.config.js`.\n-   `BACKGROUND_COLOR` редактируется в `app.config.js`.\n-   Метатеги добавлются автоматически в \u003chead\u003e.\n-   manifest.json и browserconfig.xml создаются автоматически на основе `app.config.js`.\n-   Иконки герерируются автоматически: смотрите директорию `build/img/favicon`.\n\n# Bootstrap\n\n-   Переопредление переременных в `css/base/_variables.scss`.\n-   Переопредление миксинов в `css/base/_bootstrap-mixins.scss`.\n-   Типографика в `css/base/_bootstrap-type.scss`.\n\n# HTML\n\n-   файл с `/example1.html` будут доступны по ссылке `/example1/index.html`.\n-   файл с `/example2/index.html` будут доступны по ссылке `/example2/index.html`.\n-   файл с `/_ajax-example.html` будут доступны по ссылке `/_ajax-example.html`.\n-   `head` теги не будут добавлены для файлов с `_` в начале имени.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintecmedia%2Fintecmedia.webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintecmedia%2Fintecmedia.webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintecmedia%2Fintecmedia.webpack/lists"}