Как в данном сборщике начать пользоваться class — ми es6 и ECMAScript 2017?

Хочу написать приложение (сайт-приложение) с использование 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 - ми, подняться на новую ступень
  • Вопрос задан
  • 292 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы