Adding Webpack v3 and Babel for ES6 Support

[greteltrost]

Added gulp task scripts and webpack is handled with this task. If everything is ok I will update README to reflect the changes.

Steps to test:

1- install fresh drupal 2- clone repo (github.com/greteltrost/zen) and checkout to 'webpack' branch 3- install new theme from starterkit and enable it 4- test es6 by adding some sample code on js/init.js:

const double = [1,2,3].map((num) => num * 2);

5- build js with webpack by running gulp or NODE_ENV=production gulp for minified version (or only javascript with gulp scripts) 6- check new code, should be transpiled to something that all browsers should be capable to run on /dist/app.js

"use strict";
var double = [1, 2, 3].map(function (num) {
  return num * 2;
});

More info about webpack on https://webpack.js.org/concepts/

[greteltrost]

Note: I added lodash as example, but commented it out on init.js

[andriyun]

Great work! Thank you @xArturia I'd like to test and check how it works.

I have no experience with babel. So could you provide some simple steps to check like:

• install fresh drupal
• clone repo with this PR changes
• install new theme from starter kit and enable
• add few lines of ES6 code to [filename]
• build js using gulp
• check new code

Thank you )

[greteltrost]

Updated PR description to add steps for testing and some more info. Let me know if you run into any issues.

[andriyun]

Need final affection tests of es6 code to project theme. It can be simple case like bind click event to any dom element etc.

[greteltrost]

Updated scripts task with options.theme.js, Thanks Andriy I missed to update that. script.js file has been renamed to init.js as it makes more sense to me, because this file will only initialize all packages and classes you may need. For example, to add the standard behaviors file I added an example:

require('script-loader!./behaviors.js');

This way we can have the old theme.behaviors.js file but parsed by babel (so, with ecmascript6 features) And you can also create new classes, but this covers way more than what I can write in a few lines: you can load your own packages (to separate logic between files)

import * from 'sidebar.js'

and then webpack will parse all of them for you and you will get only one file in result (this is NOT concatenation, webpack is way more advanced than that)

[andriyun]

We still have not included js files to theme :(

Before changes we have script.js file that can be included to theme after comment line https://github.com/skilld-labs/zen/blob/8.x-7.x/STARTERKIT/STARTERKIT.libraries.yml#L15

Now this file is deleted

@xArturia lets add proper changes to STARTERKIT.libraries.yml

[greteltrost]

Fixed bug in gulpfile and added the javascript output to the theme libraries file.

[andriyun]

thank you Gretel Last step is resolve conflicts

[pabloguerino]

What are we waiting for here ? If you need help for testing, please don't hesitate to ask for instructions so we can get this merged and move forward.

[andypost]

1) My review still not addressed 2) Drupal core discussion about es6 https://www.drupal.org/node/2809281#comment-12075716

[pabloguerino]

it should be ready now, some of the issues (for the gulpfile) will be solved in a separated task

[pabloguerino]

Updated and rebased, ready to be merged. This one is tested on several new projects so we know its safe to get it in.