Сборка фронтэнда с помощью Parcel, SASS и Nunjucks
Сегодня уже никого не удивить тем, что фронтэнд сайта также надо собирать из исходников препроцессоров CSS - SASS, шаблонизатора Nunjucks, статически типизированного TypeScript.
Об этом и пойдет речь в данной статье.
Итак, допустим, у Вас есть достаточно большой фронтэнд проект - верстка макета сайта Интернет-магазина с разработкой логики корзины, например. Проект достаточно большой, страниц которые надо сверстать много, да и к тому же надо реализовать достаточно нетривиальную логику корзины покупок.
Как известно, базовые стили страниц, а также базовый шаблон повторяется. Поэтому - это самые первые кандидаты на выделение их в отдельные файлы, которые затем будут подключаться по мере необходимости.
Для стилей мы будем использовать препроцессор SASS (на сайте уже есть статьи на нем), а для верстки - Nunjucks (о нем тоже рассказывал ранее).
Итак приведу сразу пример package.json файла (для установки выполните команду npm install или yarn):
{
"name": "cart-ts-app",
"version": "1.0.0",
"main": "",
"license": "MIT",
"scripts": {
"dev": "rm -rf ./.cache && rm -rf ./dist && npx parcel src/index.njk",
"prod": "rm -rf ./.cache && rm -rf ./dist && npx parcel build src/*.njk"
},
"devDependencies": {
"@types/node": "^14.0.13",
"@types/nunjucks": "^3.1.3",
"@types/react": "^16.9.38",
"nunjucks": "3.0",
"parcel-bundler": "^1.12.4",
"parcel-plugin-nunjucks": "^2.2.1",
"sass": "^1.26.8",
"typescript": "^3.9.5"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
Структура папок проекта следующая (у Вас она может быть другой):
src:. // папка src
│ index.njk
│
├───includes
│ _company_news.njk
│ _footer.njk
│ _header.njk
│ _info_board.njk
│ _product_list_discount.njk
│ _product_list_popular.njk
│
├───pages
│ about.njk
│ contacts.njk
│ _base.njk
│
├───scss
│ │ company-news.scss
│ │ footer.scss
│ │ header.scss
│ │ info-board.scss
│ │ main.scss
│ │ product.scss
│ │ products-list.scss
│ │
│ └───base
│ _colors.scss
│ _fonts.scss
│ _mixins.scss
│
├───templates-macros
│ _news_post.njk
│ _product.njk
│
└───ts
main.ts
В корне проекта также необходимо создать файл конфигурации Nunjucks - nunjucks.config.js:
module.exports = {
root: ['./src', "."],
data: {}
}
Запускает это все одной командой - yarn dev. Собранные стили, разметка и скрипты сайта будут находиться в папке dist.
-
Создано 23.06.2020 12:50:17
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.