Хочу написать приложение (сайт-приложение) с использование es6 или ECMAScript 2017 синтаксиса и "babel": "^6.5.0
Сборка которй пользуюсь имеет следующую структуру папок и файлов
## Структура папок и файлов
```
├── app/ # Исходники
│ ├── blocks/ # Блоки
│ │ └── block/ # Блок
│ │ ├── block.jade # Разметка блока
│ │ ├── block.js # Скрипт блока
│ │ └── block.styl # Стили блока
│ ├── data/ # Данные в формате JSON
│ ├── pages/ # Страницы
│ │ └── index.jade # Разметка страницы
│ ├── icons/ # SVG иконки для генерации векторного спрайта
│ ├── sprites/ # PNG иконки для генерации растрового спрайта
│ ├── resources/ # Статические файлы для копирования в dist
│ ├── scripts/ # Скрипты
│ │ └── app.js # Главный скрипт
│ └── styles/ # Стили
│ ├── helpers/ # Помощники
│ │ ├── fonts.styl # Подключение шрифтов
│ │ ├── mixins.styl # Примеси
│ │ ├── optimize.styl # Сброс стилей и фиксы
│ │ ├── svg-size.styl # Переменные с размерами SVG иконок (автосборка)
│ │ └── variables.styl # Переменные
│ ├── sprites/ # Переменные с данными PNG спрайтов (автосборка)
│ └── app.styl # Главный стилевой файл
├── dist/ # Сборка (автогенерация)
│ ├── assets/ # Подключаемые ресурсы
│ │ ├── fonts/ # Шрифты
│ │ ├── images/ # Изображения
│ │ │ └── sprites/ # Спрайты (автогенерация)
│ │ ├── scripts/ # Скрипты
│ │ └── styles/ # Стили
│ └── index.html # Страница
├── tasks/ # Подключаемые скрипты с задачами для gulpfile.babel.js
│ ├── copy.js # Копирование
│ ├── default.js # Итоговые списки задач по умолчанию
│ ├── deploy.js # Деплой в ветку dist
│ ├── icons.js # Сборка SVG иконок в один файл
│ ├── scripts.js # Сборка ES2015 скриптов в Webpack
│ ├── semver.js # Обновление версии шаблона
│ ├── server.js # Запуск локального сервера
│ ├── sprite.js # Сборка спрайтов и CSS переменных
│ ├── styles.js # Сборка стилей
│ ├── templates.js # Сборка страниц из Jade шаблонов
│ ├── watch.js # Отслеживание изменений и запуск задач
│ └── zip.js # Архивация папки dist
├── .csscomb.json # Конфигурация форматирования CSS
├── .eslintrc # Конфигурация проверки JavaScript в ESLint
├── .editorconfig # Конфигурация настроек редактора кода
├── .gitignore # Список исключённых файлов из Git
├── browserlist # Список версий браузеров для Autoprefixer
├── gulpfile.babel.js # Файл для запуска Gulp.js
├── make-block.js # Утилита создания новых блоков
├── package.json # Список модулей и прочей информации
├── readme.md # Документация шаблона
└── webpack.conf.js # Конфигурация Webpack.js
```
Из всех блоков я собираю файлы js в одном файле
app.js
import $ from 'jquery';
import 'remodal';
import '../blocks/loadst/loadst.js';
import '../blocks/main-admin/main-admin';
В файле main-admin.js я создаю объект
main-admin.js
/* global $ */
const admin = {};
export default admin;
И в других файлах я вызываю или добавляю новые функции к этому объекту
loadst.js
import admin from '../main-admin/main-admin';
admin.function(); // вызвали какую то функцию
admin.fun = () => {
добавил какую то функцию
};
Что то мне такой подход не очень нравится хотя он и рабочий и все функции и переменные доступны в любом файле js к которому я импортирую import admin from '../main-admin/main-admin';
Но мне хочется большего и начать использовать классы es6
Если есть желание можете привести пример как создать класс, расширять его и подключать его к другим файлам на основе данного сборщика
Я уже пробовал ReactJS и мне понравилась. (es6)
Вот только не как не соображу, как это сделать на данном сборщике.
Можно ли в нем использовать redux.js
В общем хочу начать писать все class - ми, подняться на новую ступень
