Adding Webpack v3 and Babel for ES6 Support by greteltrost · Pull Request #2 · skilld-labs/zen

greteltrost · 2017-03-27T20:14:43Z

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 · 2017-03-27T20:18:20Z

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

pabloguerino · 2017-03-28T19:01:41Z

+  },
+  devtool: 'source-map'
+};
+


Also related to #5, we need to handle the NODE_ENV variable here when it gets the value of production and add uglifyjs as a webpack plugin,

something like:

if (process.env.NODE_ENV === 'production') { config.plugins.push( new webpack.optimize.UglifyJsPlugin({ compress: { screw_ie8: true } }) ) }

Updated webpack to use env variables and handle file compression.

andriyun · 2017-03-30T14:37:40Z

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 · 2017-03-30T14:58:15Z

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

andriyun · 2017-03-31T09:27:30Z

+// Build Javascript.
+// #################
+gulp.task('scripts', [], function () {
+  return gulp.src('js/init.js')


Here would be better use options.theme.js variable

andriyun · 2017-03-31T09:43:15Z

@@ -1,31 +0,0 @@
-/**


Why we need to remove script.js file?
This file will be included in libraries definition
https://github.com/skilld-labs/zen/blob/8.x-7.x/STARTERKIT/STARTERKIT.libraries.yml#L15

it suits us better because init.js makes more sense as its the initialization file

andriyun · 2017-03-31T09:46:19Z

+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: 'app.js',


How we will include this file to project theme?
Maybe need to add reference to this file in libraries file below https://github.com/skilld-labs/zen/blob/8.x-7.x/STARTERKIT/STARTERKIT.libraries.yml#L15

Btw app.js name has weird semantic.
For me better will be combine/replace this file with original scripts file

its the generated output, we add only app.js and we are done

andriyun · 2017-03-31T09:54:51Z

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 · 2017-03-31T17:21:33Z

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 · 2017-04-03T14:22:44Z

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 · 2017-04-10T18:55:33Z

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

andriyun · 2017-04-24T15:43:10Z

thank you Gretel
Last step is resolve conflicts

andypost

Codestyle issues, but adopt/exclude gulpfile from sniffers makes sense.
Maybe needs new issue to discus "buatifer" for js (compatiple with drupal.ord requirements)

andypost · 2017-04-24T15:49:41Z

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}


andypost · 2017-04-24T15:49:49Z

 styleguide
 libraries
 *.map
+dist


andypost · 2017-04-24T15:51:09Z

-  $           = require('gulp-load-plugins')(),
-  browserSync = require('browser-sync').create(),
-  del         = require('del'),
+var gulp        = require('gulp'),


This makes drupal code style checker phpcs --standard=Drupal . to fail

pabloguerino · 2017-05-08T13:26:27Z

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 · 2017-05-09T11:15:10Z

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

pabloguerino · 2017-07-27T16:26:08Z

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

pabloguerino · 2018-01-24T15:11:57Z

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

pabloguerino approved these changes Mar 27, 2017

View reviewed changes

andypost assigned jbguerraz, hog-seruj, andriyun, uzlov, nicolas-guerrier and iberdinsky-skilld Mar 27, 2017

andypost added the enhancement label Mar 27, 2017

pabloguerino suggested changes Mar 28, 2017

View reviewed changes

greteltrost force-pushed the webpack branch from da9be49 to f4fd56c Compare March 30, 2017 13:41

andriyun reviewed Mar 31, 2017

View reviewed changes

pabloguerino approved these changes Mar 31, 2017

View reviewed changes

andypost reviewed Apr 24, 2017

View reviewed changes

pabloguerino force-pushed the webpack branch from 539b849 to ba51078 Compare July 27, 2017 16:20

greteltrost changed the title ~~Adding Webpack v2 and Babel for ES6 Support~~ Adding Webpack v3 and Babel for ES6 Support Jul 27, 2017

Adding Webpack v2 and Babel for ES6 Support

05e2731

greteltrost force-pushed the webpack branch from ba51078 to 05e2731 Compare January 24, 2018 15:09

@@ @@ -0,0 +1,3 @@ @@
+              {
+                "presets": ["es2015"]
+              }

                
                    No newline at end of file

Conversation

greteltrost commented Mar 27, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greteltrost commented Mar 27, 2017

Uh oh!

pabloguerino Mar 28, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andriyun commented Mar 30, 2017

Uh oh!

greteltrost commented Mar 30, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andriyun Mar 31, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andriyun commented Mar 31, 2017

Uh oh!

greteltrost commented Mar 31, 2017

Uh oh!

andriyun commented Apr 3, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greteltrost commented Apr 10, 2017

Uh oh!

andriyun commented Apr 24, 2017

Uh oh!

andypost left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pabloguerino commented May 8, 2017

Uh oh!

andypost commented May 9, 2017

Uh oh!

pabloguerino commented Jul 27, 2017

Uh oh!

pabloguerino commented Jan 24, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

greteltrost commented Mar 27, 2017 •

edited

Loading

pabloguerino Mar 28, 2017 •

edited

Loading

andriyun Mar 31, 2017 •

edited

Loading

andriyun commented Apr 3, 2017 •

edited

Loading