Здравствуйте. Я хотел бы рассказать как с помощью Brunch можно собрать MariontteJS+ES6 приложение.
Сегодня уже 2016-й год и способов собирать приложения очень много. Ниже я предлагаю рассмотреть Brunch
Ставим brunch глобально и генерируем пустой скелет
npm install -g brunch brunch new
Если не хотите его ставить глобально тогда просто
git clone https://github.com/brunch/dead-simple
Все равно будем запускать brunch с помощью npm.
Теперь нужно сконфигурировать package.json и bower.json.
{ "name": "marionette-es6-brunch", "description": "Marionette brunch es6 simple app", "author": "denar90", "version": "0.0.1", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/denar90/marionette-es6-brunch" }, "scripts": { "postinstall": "./node_modules/.bin/bower install", "start": "./node_modules/.bin/brunch w --server" }, "dependencies": { "javascript-brunch": "~1.8.0", "css-brunch": "~1.7.0", "stylus-brunch": "~1.8.1", "handlebars-brunch": "~1.9.0", "uglify-js-brunch": "~1.7.8", "clean-css-brunch": "~1.8.0", "jshint-brunch": "~1.8.0", "babel-brunch": "~6.0.0", "babel-preset-es2015": "~6.3.13", "babel-plugin-transform-decorators-legacy": "~1.3.4", "bower": "~1.7.2", "brunch": "~2.1.0" } }
{ "name": "marionette-es6-brunch", "version": "0.0.1", "dependencies": { "marionette": "~2.4.4", "bootstrap": "~3.3.2", "core.js": "~2.0.2" } }
Нам особенно интересны эти библиотеки:
- babel-brunch
- babel-preset-es2015
- babel-plugin-transform-decorators-legacy
- core-js
Именно они делают всю магию с es6.
Перейдем к конфигу самого brunch.
exports.config = { paths: { watched: ['app'] }, files: { javascripts: { defaultExtension: "js", joinTo: { "javascripts/app.js": /^app/, "javascripts/vendor.js": /^bower_components/ }, order: { before: [ 'bower_components/jquery/dist/jquery.js', 'bower_components/underscore/underscore.js', 'bower_components/backbone/backbone.js', 'bower_components/marionette/lib/backbone.marionette.js', 'bower_components/bootstrap/dist/js/bootstrap.js' ] } }, stylesheets: { defaultExtension: "styl", joinTo: "stylesheets/app.css" }, templates: { defaultExtension: "hbs", joinTo: "javascripts/app.js" } }, plugins: { babel: { presets: ['es2015'], ignore: [ /^(bower_components|vendor|node_modules)/ ], pattern: /\.(es6|jsx)$/, plugins: ['babel-plugin-transform-decorators-legacy'] } }, modules: { autoRequire: { 'javascripts/app.js': ['initialize'] } }, server: { port: 8080, run: true } };
Вот строчки которые помогают билдить es6
... plugins: { babel: { presets: ['es2015'], ignore: [ /^(bower_components|vendor|node_modules)/ ], pattern: /\.(es6|jsx)$/, plugins: ['babel-plugin-transform-decorators-legacy'] } } ... Теперь можно спокойно перейти к коду. Здесь все стандартно: Model, View, и т.д.
Единственный момент на который хотелось бы обратить внимание — это установка атрибутов. Есть несколько способов:
export default class ItemView extends Marionette.ItemView { tagName() { return "li"; } constructor(options) { super(options); } }
export default class ItemView extends Marionette.ItemView.extend({ tagName: 'li', initialize(options) { } });
import { props } from 'decorators'; @props({ tagName: 'li' }) export default class ItemView extends Marionette.ItemView { initialize(options) { } }); Мне нравится последний способ. Я нашел его здесь
Выполняем
npm start и наслаждаемся своим творением открыв в браузере localhost:8080/.
Единственное что нам еще нужно — это тесты.
Наши тесты будут лежать в папке specs.
Добавим devDependecies в нашем package.json файле
"devDependencies": { "phantomjs": "~1.9.18", "coveralls": "~2.11.6", "karma": "~0.13.19", "karma-es6-shim": "~0.2.3", "karma-mocha": "~0.2.1", "karma-chai-plugins": "~0.6.1", "karma-coverage": "~0.5.3", "karma-coveralls": "~1.1.2", "karma-phantomjs-launcher": "~0.2.3" } Немножко изменим brunch-config.js
exports.config = { paths: { watched: ['app', 'specs'] }, files: { javascripts: { defaultExtension: "js", joinTo: { "javascripts/app.js": /^app/, "javascripts/specs.js": /^specs/, "javascripts/vendor.js": /^bower_components/ }, order: { before: [ 'bower_components/jquery/dist/jquery.js', 'bower_components/underscore/underscore.js', 'bower_components/backbone/backbone.js', 'bower_components/marionette/lib/backbone.marionette.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'bower_components/es6-shim/es6-shim.js' ] } }, stylesheets: { defaultExtension: "styl", joinTo: "stylesheets/app.css" }, templates: { defaultExtension: "hbs", joinTo: "javascripts/app.js" } }, plugins: { babel: { presets: ['es2015'], ignore: [ /^(bower_components|vendor|node_modules)/ ], pattern: /\.(es6|jsx)$/, plugins: ['babel-plugin-transform-decorators-legacy'] } }, modules: { autoRequire: { 'javascripts/app.js': ['initialize'] } }, server: { port: 8080, run: true }, overrides: { testing: { modules: { autoRequire: { 'javascripts/specs.js': ['specs/initialize'] } } } } };
Создадим наш
module.exports = function(config) { config.set({<code> browsers: ['PhantomJS'], frameworks: ['mocha', 'chai', 'es6-shim'], files: [ "public/javascripts/vendor.js", "public/javascripts/app.js", "public/javascripts/specs.js" ], reporters: ['coverage', 'coveralls'], preprocessors: { 'public/javascripts/app.js': 'coverage' }, coverageReporter: { type: 'lcov', dir: 'coverage/', subdir: '.'<a href="https://github.com/denar90/marionette-es6-brunch"></a> }, singleRun: true }); };
И добавим еще один скрипт в package.json.
"test": "./node_modules/.bin/brunch b --env testing && ./node_modules/.bin/karma start karma.conf.js" Для полноты картины сделаем интеграцию с Travis CI.
language: node_js node_js: - '4.0' after_script: - cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
Весь код можно посмотреть здесь.
Спасибо за внимание.
ссылка на оригинал статьи http://habrahabr.ru/post/274655/
Добавить комментарий