{"id":271760,"date":"2016-01-08T10:04:02","date_gmt":"2016-01-08T07:04:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=271760"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=271760","title":{"rendered":"\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 MariontteJS+ES6 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Brunch"},"content":{"rendered":"<p>       \u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435. \u042f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Brunch \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c MariontteJS+ES6 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/893\/8ca\/436\/8938ca4360434764889eecfbea53554a.png\"\/><\/p>\n<p>  \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0443\u0436\u0435 2016-\u0439 \u0433\u043e\u0434 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e. \u041d\u0438\u0436\u0435 \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"http:\/\/brunch.io\/\">Brunch<\/a><br \/>  <a name=\"habracut\"><\/a><br \/>  \u0421\u0442\u0430\u0432\u0438\u043c brunch \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u0441\u043a\u0435\u043b\u0435\u0442<br \/>  <code> npm install -g brunch brunch new <\/code><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0435\u0433\u043e \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0441\u0442\u043e <br \/>  <code> git clone https:\/\/github.com\/brunch\/dead-simple <\/code><br \/>  \u0412\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c brunch \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e npm.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c package.json \u0438 bower.json.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">package.json<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">{   &quot;name&quot;: &quot;marionette-es6-brunch&quot;,   &quot;description&quot;: &quot;Marionette brunch es6 simple app&quot;,   &quot;author&quot;: &quot;denar90&quot;,   &quot;version&quot;: &quot;0.0.1&quot;,   &quot;license&quot;: &quot;MIT&quot;,   &quot;repository&quot;: {     &quot;type&quot;: &quot;git&quot;,     &quot;url&quot;: &quot;https:\/\/github.com\/denar90\/marionette-es6-brunch&quot;   },   &quot;scripts&quot;: {     &quot;postinstall&quot;: &quot;.\/node_modules\/.bin\/bower install&quot;,     &quot;start&quot;: &quot;.\/node_modules\/.bin\/brunch w --server&quot;   },   &quot;dependencies&quot;: {     &quot;javascript-brunch&quot;: &quot;~1.8.0&quot;,     &quot;css-brunch&quot;: &quot;~1.7.0&quot;,     &quot;stylus-brunch&quot;: &quot;~1.8.1&quot;,     &quot;handlebars-brunch&quot;: &quot;~1.9.0&quot;,     &quot;uglify-js-brunch&quot;: &quot;~1.7.8&quot;,     &quot;clean-css-brunch&quot;: &quot;~1.8.0&quot;,     &quot;jshint-brunch&quot;: &quot;~1.8.0&quot;,     &quot;babel-brunch&quot;: &quot;~6.0.0&quot;,     &quot;babel-preset-es2015&quot;: &quot;~6.3.13&quot;,     &quot;babel-plugin-transform-decorators-legacy&quot;: &quot;~1.3.4&quot;,     &quot;bower&quot;: &quot;~1.7.2&quot;,     &quot;brunch&quot;: &quot;~2.1.0&quot;   } } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">bower.json<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">{   &quot;name&quot;: &quot;marionette-es6-brunch&quot;,   &quot;version&quot;: &quot;0.0.1&quot;,   &quot;dependencies&quot;: {     &quot;marionette&quot;: &quot;~2.4.4&quot;,     &quot;bootstrap&quot;: &quot;~3.3.2&quot;,     &quot;core.js&quot;: &quot;~2.0.2&quot;   } } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041d\u0430\u043c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b \u044d\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:  <\/p>\n<ul>\n<li>babel-brunch<\/li>\n<li>babel-preset-es2015<\/li>\n<li>babel-plugin-transform-decorators-legacy<\/li>\n<li>core-js<\/li>\n<\/ul>\n<p>  \u0418\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0441\u044e \u043c\u0430\u0433\u0438\u044e \u0441 es6.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043a\u043e\u043d\u0444\u0438\u0433\u0443 \u0441\u0430\u043c\u043e\u0433\u043e brunch.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">brunch-config.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">exports.config = {   paths: {     watched: ['app']   },   files: {     javascripts: {       defaultExtension: &quot;js&quot;,       joinTo: {         &quot;javascripts\/app.js&quot;: \/^app\/,         &quot;javascripts\/vendor.js&quot;: \/^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: &quot;styl&quot;,       joinTo: &quot;stylesheets\/app.css&quot;     },     templates: {       defaultExtension: &quot;hbs&quot;,       joinTo: &quot;javascripts\/app.js&quot;     }   },   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   } }; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0412\u043e\u0442 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0431\u0438\u043b\u0434\u0438\u0442\u044c es6<\/p>\n<pre><code class=\"javascript\">... plugins: {     babel: {       presets: ['es2015'],       ignore: [         \/^(bower_components|vendor|node_modules)\/       ],       pattern: \/\\.(es6|jsx)$\/,       plugins: ['babel-plugin-transform-decorators-legacy']     }   } ... <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043a\u043e\u0434\u0443. \u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e: Model, View, \u0438 \u0442.\u0434.<br \/>  \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">export default class ItemView extends Marionette.ItemView {     tagName() { return &quot;li&quot;; }      constructor(options) {         super(options);     } } <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">export default class ItemView extends Marionette.ItemView.extend({     tagName: 'li',      initialize(options) {     } }); <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { props } from 'decorators';  @props({     tagName: 'li' }) export default class ItemView extends Marionette.ItemView {     initialize(options) {     } }); <\/code><\/pre>\n<p>  \u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431. \u042f \u043d\u0430\u0448\u0435\u043b \u0435\u0433\u043e <a href=\"https:\/\/github.com\/fs\/backbone-base\/blob\/master\/app\/scripts\/decorators.js\">\u0437\u0434\u0435\u0441\u044c<\/a><\/p>\n<p>  \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c  <\/p>\n<pre><code class=\"javascript\">npm start <\/code><\/pre>\n<p>  \u0438 \u043d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0435\u043c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u0442\u0432\u043e\u0440\u0435\u043d\u0438\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 <a href=\"http:\/\/localhost\">localhost<\/a>:8080\/.<\/p>\n<p>  \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u0435\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u2014 \u044d\u0442\u043e \u0442\u0435\u0441\u0442\u044b.<br \/>  \u041d\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043b\u0435\u0436\u0430\u0442\u044c \u0432 \u043f\u0430\u043f\u043a\u0435 specs.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c devDependecies \u0432 \u043d\u0430\u0448\u0435\u043c package.json \u0444\u0430\u0439\u043b\u0435  <\/p>\n<pre><code class=\"javascript\">&quot;devDependencies&quot;: {     &quot;phantomjs&quot;: &quot;~1.9.18&quot;,     &quot;coveralls&quot;: &quot;~2.11.6&quot;,     &quot;karma&quot;: &quot;~0.13.19&quot;,     &quot;karma-es6-shim&quot;: &quot;~0.2.3&quot;,     &quot;karma-mocha&quot;: &quot;~0.2.1&quot;,     &quot;karma-chai-plugins&quot;: &quot;~0.6.1&quot;,     &quot;karma-coverage&quot;: &quot;~0.5.3&quot;,     &quot;karma-coveralls&quot;: &quot;~1.1.2&quot;,     &quot;karma-phantomjs-launcher&quot;: &quot;~0.2.3&quot;   } <\/code><\/pre>\n<p>  \u041d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c brunch-config.js<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">brunch-config.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">exports.config = {   paths: {     watched: ['app', 'specs']   },   files: {     javascripts: {       defaultExtension: &quot;js&quot;,       joinTo: {         &quot;javascripts\/app.js&quot;: \/^app\/,         &quot;javascripts\/specs.js&quot;: \/^specs\/,         &quot;javascripts\/vendor.js&quot;: \/^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: &quot;styl&quot;,       joinTo: &quot;stylesheets\/app.css&quot;     },     templates: {       defaultExtension: &quot;hbs&quot;,       joinTo: &quot;javascripts\/app.js&quot;     }   },   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']         }       }     }   } }; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448   <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">karma.conf.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">module.exports = function(config) {     config.set({&lt;code&gt;         browsers: ['PhantomJS'],         frameworks: ['mocha', 'chai', 'es6-shim'],         files: [             &quot;public\/javascripts\/vendor.js&quot;,             &quot;public\/javascripts\/app.js&quot;,             &quot;public\/javascripts\/specs.js&quot;         ],         reporters: ['coverage', 'coveralls'],         preprocessors: {             'public\/javascripts\/app.js': 'coverage'         },         coverageReporter: {             type: 'lcov',             dir: 'coverage\/',             subdir: '.'&lt;a href=&quot;https:\/\/github.com\/denar90\/marionette-es6-brunch&quot;&gt;&lt;\/a&gt;         },         singleRun: true     }); }; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 package.json.<\/p>\n<pre><code class=\"javascript\">&quot;test&quot;: &quot;.\/node_modules\/.bin\/brunch b --env testing && .\/node_modules\/.bin\/karma start karma.conf.js&quot; <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0442\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 Travis CI.  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">travis.yml<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">language: node_js node_js:   - '4.0' after_script:   - cat coverage\/lcov.info | .\/node_modules\/coveralls\/bin\/coveralls.js <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/github.com\/denar90\/marionette-es6-brunch\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.               <\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/274655\/\"> http:\/\/habrahabr.ru\/post\/274655\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       \u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435. \u042f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Brunch \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c MariontteJS+ES6 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/893\/8ca\/436\/8938ca4360434764889eecfbea53554a.png\"\/><\/p>\n<p>  \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0443\u0436\u0435 2016-\u0439 \u0433\u043e\u0434 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e. \u041d\u0438\u0436\u0435 \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"http:\/\/brunch.io\/\">Brunch<\/a>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-271760","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/271760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=271760"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/271760\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=271760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=271760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=271760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}