Developers Club geek daily blog

1 year, 10 months ago
Hello. I would like to tell as by means of Brunch it is possible to collect MariontteJS+ES6 the application.

We collect simple MariontteJS+ES6 the application by means of Brunch

Today the 2016th year and methods to collect applications it is a lot of. Below I suggest to consider Brunch

We put brunch globally and we generate an empty skeleton
npm install -g brunch brunch new

If you do not want to put it globally then simply
git clone https://github.com/brunch/dead-simple
Let's start all the same brunch by means of npm.

Now it is necessary to configure package.json and bower.json.

package.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"
  }
}


bower.json
{
  "name": "marionette-es6-brunch",
  "version": "0.0.1",
  "dependencies": {
    "marionette": "~2.4.4",
    "bootstrap": "~3.3.2",
    "core.js": "~2.0.2"
  }
}


These libraries are especially interesting to us:
  • babel-brunch
  • babel-preset-es2015
  • babel-plugin-transform-decorators-legacy
  • core-js

They do all magic with es6.

Let's pass to a config of brunch.

brunch-config.js
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
  }
};


There are lines which help to bildit es6

...
plugins: {
    babel: {
      presets: ['es2015'],
      ignore: [
        /^(bower_components|vendor|node_modules)/
      ],
      pattern: /\.(es6|jsx)$/,
      plugins: ['babel-plugin-transform-decorators-legacy']
    }
  }
...

Now it is possible to pass to a code quietly. Here everything is standard: Model, View, etc.
The only moment to which it would be desirable to pay attention is an installation of attributes. There are several methods:

export default class ItemView extends Marionette.ItemView {
    tagName() { return "li"; }

    constructor(options) {
        super(options);
    }
}

export default Marionette.ItemView.extend({
    tagName: 'li',

    initialize(options) {
    }
});

import { props } from 'decorators';

@props({
    tagName: 'li'
})
export default class ItemView extends Marionette.ItemView {
    initialize(options) {
    }
});

I like the last method. I found it here

We execute
npm start

also we enjoy the creation having opened in the localhost:8080/browser.

The only thing that still is necessary for us - it is tests.
Our tests will lie in the specs folder.

Let's add devDependecies in our package.json the file
"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"
  }

A little bit we will change brunch-config.js

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']
        }
      }
    }
  }
};



Let's create ours
karma.conf.js
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
    });
};


Also we will add one more script to package.json.

"test": "./node_modules/.bin/brunch b --env testing &&./node_modules/.bin/karma start karma.conf.js"


To complete the picture we will make integration with Travis CI.
travis.yml
language: node_js
node_js:
  - '4.0'
after_script:
  - cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js


It is possible to look at my example here.

Thanks for attention.

This article is a translation of the original post at habrahabr.ru/post/274655/
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here: sysmagazine.com@gmail.com.

We believe that the knowledge, which is available at the most popular Russian IT blog habrahabr.ru, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus