naf-naf - Сборщик реакт приложений

Ниф-ниф строит дом из соломы, нуф-нуф из дерева, а наф-наф крепкие и стабильные приложения на реакте. Наф-наф готовит необходимую конфигурацию для приятной разработки. Приложения, построенные с помощью него оптимизированы по-умолчанию, так как наф-наф умеет сжимать картинки, css и javascript.

 

Установка

Для установки naf-naf, выполните в консоли:

npm install @ivan-podgornov/naf-naf react react-dom

Потом откройте package.json и добавьте следующие npm-скрипты:

{
    "scripts": {
        "dev": "naf-naf",
        "build": "naf-naf generate"
    }
}

Структура папок

• assets - эта папка содержит нескомпилированные файлы с исходным кодом, такие как sass, javascript и т. д.
• components - содержит компоненты приложения.
• pages - содержит страницы (роуты) сайта. Наф-наф считывает все .jsx файлы внутри этой папки и создаёт Router для Вашего приложения.
• static - все файлы внутри этой папки доступны через /. Например, если в папке лежит изображение с именем page-background.jpg, на странице его можно будет использовать так: <img src="/page-background.jpg" />.

Для папок assets, components и pages доступны алиасы. То есть вместо:

import Header from '../../../components/header/header';

можно использовать:

import Header from 'components/header/header';

Алиасы в SASS Для того, чтобы использовать алиасы в sass-файлах, нужно добавить перед импортом ~. Для того, чтобы импортировать файл my-font.scss из папки assets нужно написать @import '~assets/my-font.scss'.