Как стать автором
Обновить

Разработка на ES6 для браузеров

Время на прочтение 2 мин
Количество просмотров 23K
Доброго времени суток.



Поддержка нового стандарта EcmaScript 6 в браузерах все ближе и ближе, и тем кому не терпится начать разрабатывать с использованием новых возможностей ES6 предлагаю взглянуть на шаблонный проект для этой цели.

Представляю вашему вниманию github.com/DavidKlassen/es6-browser-boilerplate.

В основу шаблона лег github.com/babel/babel-library-boilerplate, но gulpfile.js был основательно почищен и упрощен. Многие зависимости я убрал и оставил возможности, которые необходимы для разработки приложений для браузеров.

Основные цели, которые я преследовал:


  • Шаблон должен быть хорошей стартовой точкой для разработки SPA и third party SDK.
  • Минималистичность и расширяемость.
  • Весь код, то есть и само приложение и тесты можно писать на ES6.


Рабочее окружение


Требования к рабочему окружению достаточно стандартные и скорее всего, если вы разрабатываете на JavaScript у вас уже все установлено. Вам потребуется NodeJS либо io.js, NPM, Gulp, Bower и Java 7+ (java нужна, т. к. для минификации используется Google Closure Compiler) см. UPD2.

Возможности шаблона


  • Для поддержки синтаксиса ES6 используется компилятор Babel.
  • Проверка качества кода обеспечивается двумя утилитами, ESLint и JSCS.
  • За сборку проекта отвечает browserify и babelify.
  • Минификацию кода делает Google Closure Compiler UglifyJS2.
  • Unit тесты используют mocha, chai и sinon.
  • Отчет о покрытии кода тестами генерируется с помощью istanbul и isparta.
  • Integration тесты запускаются в karma.
  • В качестве таск раннера используется Gulp.


Как использовать



Скачать и подготовить проект к работе очень просто:
$ git clone git@github.com:DavidKlassen/es6-browser-boilerplate.git
$ cd es6-browser-boilerplate
$ npm run setup

После этого можно удалить .git и начинать кодить.

Список доступных задач gulp:
  • gulp lint — запускает проверку качества кода с помощью ESLint и JSCS.
  • gulp test:unit — запускает unit тесты.
  • gulp coverage — запускае unit тесты и генерирует отчет о покрытии кода тестами.
  • gulp test:integration — запускает интеграционные тесты в браузере с помощью karma.
  • gulp test — запускает все тесты.
  • gulp browserify — собирает скрипт готовый для использования в браузере.
  • gulp compile — собирает минифицированную версию скрипта.
  • gulp build — собирает обе версии скрипта.
  • gulp — дефолтная задача, запускает проверку кода, тесты и сборку проекта.


Вещи которые хотелось бы улучшить


Помимо всяческих мелочей типа подключения test-frameworks глобально для всех файлов с тестами и мелких улучшений в gulpfile, хотелось бы подключить возможность использования Google Closure Compiler в режиме ADVANCED_OPTIMIZATIONS и статический анализ типов на основе аннотаций gcc.

Ну и конечно же я жду отзывов, пожеланий и пулреквестов. Спасибо за внимание! :)

UPD: В коментариях возник спор о распространенности Java на машинах разработчиков, так что добавляю голосовалку. Если не уверены есть ли java на вашей машине или нет, запускаем: java -version
UPD2: По просьбам трудящихся заменил google closure compliler на uglifyjs.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Установлена ли у вас Java
70.85% Да 350
29.15% Нет 144
Проголосовали 494 пользователя. Воздержались 75 пользователей.
Теги:
Хабы:
+16
Комментарии 41
Комментарии Комментарии 41

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн