Geekly Articles each Day
📜 ⬆️ ⬇️

Putting together a simple MariontteJS + ES6 application using Brunch

Hello. I would like to tell how using Brunch you can build MariontteJS + ES6 application.



Today is 2016, and there are a lot of ways to build applications. Below, I propose to consider Brunch

Set brunch globally and generate an empty skeleton
npm install -g brunch
brunch new

')
If you do not want to put it globally then just
git clone github.com/brunch/dead-simple

We will still run brunch using npm.

Now you need 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" } }


We are especially interested in these libraries:

It is they who do all the magic with es6.

We turn to the configuration of the most 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 } };


Here are the lines that help build es6

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

Now you can safely go to the code. Everything is standard here: Model, View, etc.
The only point that I would like to draw attention to is the installation of attributes. There are several ways:

 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 way. I found it here

We perform
 npm start

and enjoy your creation by opening localhost : 8080 / in your browser.

The only thing we need is tests.
Our tests will be in the specs folder.

Add devDependecies in our package.json 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" }

Change brunch-config.js a bit

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 }); };


And add another script to package.json.

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


For completeness, we will integrate with Travis CI.
travis.yml
 language: node_js node_js: - '4.0' after_script: - cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js


My example can be found here .

Thanks for attention.

Source: https://habr.com/ru/post/274655/

More articles:


All Articles