LIL-107 Настройка работы с JavaScript при помощи webpack + Babel

web/package.json

@@ -9,7 +9,10 @@
   "authors": "Coderiver <html@coderiver.com.ua>",
   "devDependencies": {
     "autoprefixer": "^6.3.3",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-runtime": "^6.4.3",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.3.13",
     "browser-sync": "^2.10.0",
     "css-mqpacker": "^5.0.1",
@@ -37,6 +40,12 @@
     "lodash": "^4.3.0",
     "require-dir": "^0.3.0",
     "run-sequence": "^1.1.5",
-    "through2": "^2.0.1"
+    "through2": "^2.0.1",
+    "webpack": "^3.10.0"
+  },
+  "dependencies": {
+    "jquery": "^3.3.1",
+    "owl.carousel": "^2.2.0",
+    "validator": "^9.2.0"
   }
 }

web/src/js/app.js

@@ -1,248 +1,12 @@
-// example of simple includes for js
+/**
-//=include lib/jquery.min.js
+ * Входная точка клиентского приложения.
-//=include lib/owl.carousel.min.js
+ */
-//=include lib/jquery-ui.min.js
+
-//=include lib/datepicker-ru.js
+import "./modules/header";
-
+import "./modules/search";
-// global
+import "./modules/toggle";
-var mobileWidth = 600;
+import "./modules/auth";
-
+import "./modules/select";
-// header
+// import "./modules/datepicker";
-(function(){
+import "./modules/tabs";
-    var header = $('.js-header'),
+import "./modules/popup";
-        menu = header.find('.js-header-menu'),
-        wrap = header.find('.js-header-wrap'),
-        close = header.find('.js-header-close'),
-        section = header.find('.js-header-section'),
-        list = header.find('.js-header-list');
-
-    menu.on('click', function(e){
-        if ($(window).width() < mobileWidth) {
-            e.preventDefault();
-            wrap.addClass('visible');
-        }
-    });
-
-    close.on('click', function(e){
-        if ($(window).width() < mobileWidth) {
-            e.preventDefault();
-            wrap.removeClass('visible');
-            $(window).scrollTop(0);
-        }
-    });
-
-    section.on('click', function(e){
-        if ($(window).width() < mobileWidth) {
-            e.preventDefault();
-            var _this = $(this);
-
-            _this.toggleClass('open');
-            _this.next().slideToggle();
-        }
-    });
-}());
-
-// search
-(function(){
-    var search = $('.js-search'),
-        input = search.find('.js-search-input'),
-        btn = search.find('.js-search-btn');
-
-    btn.on('click', function(e){
-        if ($(window).width() >= mobileWidth) {
-            if (!search.hasClass('open')) {
-                e.preventDefault();
-            }
-            search.addClass('open');
-            setTimeout(function(){
-                input.focus();
-            }, 200);
-        }
-    });
-
-    search.on('click', function(e){
-        e.stopPropagation();
-    });
-
-    $(document).on('click', function(){
-        search.removeClass('open');
-        input.val('');
-    });
-}());
-
-// toggle
-(function(){
-    $('.js-toggle-head').on('click', function(e){
-        e.preventDefault();
-        var _this = $(this);
-        _this.toggleClass('active');
-        _this.next().slideToggle();
-    });
-}());
-
-// auth
-(function(){
-    var auth = $('.js-auth'),
-        type = auth.find('.js-auth-type'),
-        tab = auth.find('.js-auth-tab'),
-        login = auth.find('.js-auth-login'),
-        pass = auth.find('.js-auth-pass'),
-        goPass = auth.find('.js-auth-go-pass'),
-        goEnter = auth.find('.js-auth-go-enter');
-
-    type.on('click', function(e){
-        e.preventDefault();
-        var _this = $(this),
-            index = _this.index();
-
-        type.removeClass('active');
-        _this.addClass('active');
-        tab.hide();
-        tab.eq(index).fadeIn();
-    });
-
-    goPass.on('click', function(e){
-        e.preventDefault();
-
-        login.hide();
-        pass.fadeIn();
-    });
-
-    goEnter.on('click', function(e){
-        e.preventDefault();
-
-        pass.hide();
-        login.fadeIn();
-    });
-}());
-
-// select
-(function(){
-    var select = $('.js-select');
-    if (select.length) {
-        select.each(function(){
-            var _this = $(this),
-                head = _this.find('.js-select-head'),
-                option = _this.find('.js-select-option'),
-                input = _this.find('.js-select-input');
-
-            head.on('click', function(e){
-                e.preventDefault();
-                e.stopPropagation();
-
-                if (_this.hasClass('active')) {
-                    _this.removeClass('active');
-                } else {
-                    select.removeClass('active');
-                    _this.addClass('active');
-                }
-            });
-
-            option.on('click', function(e){
-                e.preventDefault();
-                _this.addClass('selected');
-
-                var _thisOption = $(this),
-                    value = _thisOption.text();
-
-                head.text(value);
-                
-                option.removeClass('active');
-                _thisOption.addClass('active');
-
-                input.val(value);
-            });
-        });
-
-        $(document).on('click', function(){
-            select.removeClass('active');
-        });
-    }
-}());
-
-// datepicker
-(function(){
-    var datepicker = $('.js-datepicker');
-    if (datepicker.length) {
-        $.datepicker.setDefaults( $.datepicker.regional["ru"]);
-        datepicker.each(function(){
-            $(this).datepicker({
-                dateFormat: "dd/mm/yy"
-            });
-        });
-    }
-}());
-
-// tabs
-(function(){
-    var tabs = $('.js-tabs');
-    if (tabs.length) {
-        tabs.each(function(){
-            var _this = $(this),
-                btn = _this.find('.js-tabs-btn'),
-                item = _this.find('.js-tabs-item');
-
-            btn.on('click', function(e){
-                e.preventDefault();
-
-                var _thisBtn = $(this),
-                    index = _thisBtn.index();
-
-                btn.removeClass('active');
-                _thisBtn.addClass('active');
-                item.hide();
-                item.eq(index).fadeIn();
-            });
-        });
-    }
-}());
-
-// popup
-(function(){
-    var body = $('body'),
-        popup;
-
-    $('body').on('click', '[data-popup]', function(e){
-        e.preventDefault();
-        e.stopPropagation();
-
-        var data = $(this).data('popup');
-        popup = $(data);
-        showPopup();
-    });
-
-    $('.js-popup-close').on('click', function(e){
-        e.preventDefault();
-        hidePopup();
-    });
-
-    $('body').on('click', '.js-outer', function(){
-        if (popup != undefined) {
-            hidePopup();
-        }
-    });
-
-    $('.js-popup-wrap').on('click', function(e){
-        e.stopPropagation();
-    });
-
-    $(document).keyup(function(e){
-      if (e.keyCode === 27) hidePopup();
-    });
-
-    function showPopup(){
-        body.addClass('no-scroll');
-        popup.addClass('open');
-        setTimeout(function(){
-            popup.addClass('visible');
-        }, 100);
-    }
-
-    function hidePopup(){
-        body.removeClass('no-scroll');
-        popup.removeClass('visible');
-        setTimeout(function(){
-            popup.removeClass('open');
-        }, 300);
-    }
-}());

web/src/js/app_def.js

@@ -0,0 +1,248 @@
+// example of simple includes for js
+//=include lib/jquery.min.js
+//=include lib/owl.carousel.min.js
+//=include lib/jquery-ui.min.js
+//=include lib/datepicker-ru.js
+
+// global
+var mobileWidth = 600;
+
+// header
+(function(){
+    var header = $('.js-header'),
+        menu = header.find('.js-header-menu'),
+        wrap = header.find('.js-header-wrap'),
+        close = header.find('.js-header-close'),
+        section = header.find('.js-header-section'),
+        list = header.find('.js-header-list');
+
+    menu.on('click', function(e){
+        if ($(window).width() < mobileWidth) {
+            e.preventDefault();
+            wrap.addClass('visible');
+        }
+    });
+
+    close.on('click', function(e){
+        if ($(window).width() < mobileWidth) {
+            e.preventDefault();
+            wrap.removeClass('visible');
+            $(window).scrollTop(0);
+        }
+    });
+
+    section.on('click', function(e){
+        if ($(window).width() < mobileWidth) {
+            e.preventDefault();
+            var _this = $(this);
+
+            _this.toggleClass('open');
+            _this.next().slideToggle();
+        }
+    });
+}());
+
+// search
+(function(){
+    var search = $('.js-search'),
+        input = search.find('.js-search-input'),
+        btn = search.find('.js-search-btn');
+
+    btn.on('click', function(e){
+        if ($(window).width() >= mobileWidth) {
+            if (!search.hasClass('open')) {
+                e.preventDefault();
+            }
+            search.addClass('open');
+            setTimeout(function(){
+                input.focus();
+            }, 200);
+        }
+    });
+
+    search.on('click', function(e){
+        e.stopPropagation();
+    });
+
+    $(document).on('click', function(){
+        search.removeClass('open');
+        input.val('');
+    });
+}());
+
+// toggle
+(function(){
+    $('.js-toggle-head').on('click', function(e){
+        e.preventDefault();
+        var _this = $(this);
+        _this.toggleClass('active');
+        _this.next().slideToggle();
+    });
+}());
+
+// auth
+(function(){
+    var auth = $('.js-auth'),
+        type = auth.find('.js-auth-type'),
+        tab = auth.find('.js-auth-tab'),
+        login = auth.find('.js-auth-login'),
+        pass = auth.find('.js-auth-pass'),
+        goPass = auth.find('.js-auth-go-pass'),
+        goEnter = auth.find('.js-auth-go-enter');
+
+    type.on('click', function(e){
+        e.preventDefault();
+        var _this = $(this),
+            index = _this.index();
+
+        type.removeClass('active');
+        _this.addClass('active');
+        tab.hide();
+        tab.eq(index).fadeIn();
+    });
+
+    goPass.on('click', function(e){
+        e.preventDefault();
+
+        login.hide();
+        pass.fadeIn();
+    });
+
+    goEnter.on('click', function(e){
+        e.preventDefault();
+
+        pass.hide();
+        login.fadeIn();
+    });
+}());
+
+// select
+(function(){
+    var select = $('.js-select');
+    if (select.length) {
+        select.each(function(){
+            var _this = $(this),
+                head = _this.find('.js-select-head'),
+                option = _this.find('.js-select-option'),
+                input = _this.find('.js-select-input');
+
+            head.on('click', function(e){
+                e.preventDefault();
+                e.stopPropagation();
+
+                if (_this.hasClass('active')) {
+                    _this.removeClass('active');
+                } else {
+                    select.removeClass('active');
+                    _this.addClass('active');
+                }
+            });
+
+            option.on('click', function(e){
+                e.preventDefault();
+                _this.addClass('selected');
+
+                var _thisOption = $(this),
+                    value = _thisOption.text();
+
+                head.text(value);
+                
+                option.removeClass('active');
+                _thisOption.addClass('active');
+
+                input.val(value);
+            });
+        });
+
+        $(document).on('click', function(){
+            select.removeClass('active');
+        });
+    }
+}());
+
+// datepicker
+(function(){
+    var datepicker = $('.js-datepicker');
+    if (datepicker.length) {
+        $.datepicker.setDefaults( $.datepicker.regional["ru"]);
+        datepicker.each(function(){
+            $(this).datepicker({
+                dateFormat: "dd/mm/yy"
+            });
+        });
+    }
+}());
+
+// tabs
+(function(){
+    var tabs = $('.js-tabs');
+    if (tabs.length) {
+        tabs.each(function(){
+            var _this = $(this),
+                btn = _this.find('.js-tabs-btn'),
+                item = _this.find('.js-tabs-item');
+
+            btn.on('click', function(e){
+                e.preventDefault();
+
+                var _thisBtn = $(this),
+                    index = _thisBtn.index();
+
+                btn.removeClass('active');
+                _thisBtn.addClass('active');
+                item.hide();
+                item.eq(index).fadeIn();
+            });
+        });
+    }
+}());
+
+// popup
+(function(){
+    var body = $('body'),
+        popup;
+
+    $('body').on('click', '[data-popup]', function(e){
+        e.preventDefault();
+        e.stopPropagation();
+
+        var data = $(this).data('popup');
+        popup = $(data);
+        showPopup();
+    });
+
+    $('.js-popup-close').on('click', function(e){
+        e.preventDefault();
+        hidePopup();
+    });
+
+    $('body').on('click', '.js-outer', function(){
+        if (popup != undefined) {
+            hidePopup();
+        }
+    });
+
+    $('.js-popup-wrap').on('click', function(e){
+        e.stopPropagation();
+    });
+
+    $(document).keyup(function(e){
+      if (e.keyCode === 27) hidePopup();
+    });
+
+    function showPopup(){
+        body.addClass('no-scroll');
+        popup.addClass('open');
+        setTimeout(function(){
+            popup.addClass('visible');
+        }, 100);
+    }
+
+    function hidePopup(){
+        body.removeClass('no-scroll');
+        popup.removeClass('visible');
+        setTimeout(function(){
+            popup.removeClass('open');
+        }, 300);
+    }
+}());

web/src/js/constants.js

@@ -0,0 +1 @@
+export const MOBILE_WIDTH = 600;

web/src/js/modules/auth.js

@@ -0,0 +1,36 @@
+import $ from 'jquery';
+
+$(document).ready(function () {
+    let auth = $('.js-auth'),
+        type = auth.find('.js-auth-type'),
+        tab = auth.find('.js-auth-tab'),
+        login = auth.find('.js-auth-login'),
+        pass = auth.find('.js-auth-pass'),
+        goPass = auth.find('.js-auth-go-pass'),
+        goEnter = auth.find('.js-auth-go-enter');
+
+    type.on('click', function(e){
+        e.preventDefault();
+        let _this = $(this),
+            index = _this.index();
+
+        type.removeClass('active');
+        _this.addClass('active');
+        tab.hide();
+        tab.eq(index).fadeIn();
+    });
+
+    goPass.on('click', function(e){
+        e.preventDefault();
+
+        login.hide();
+        pass.fadeIn();
+    });
+
+    goEnter.on('click', function(e){
+        e.preventDefault();
+
+        pass.hide();
+        login.fadeIn();
+    });
+});

web/src/js/modules/datepicker.js

@@ -0,0 +1,13 @@
+import $ from 'jquery';
+
+$(document).ready(function () {
+    let datepicker = $('.js-datepicker');
+    if (datepicker.length) {
+        $.datepicker.setDefaults( $.datepicker.regional["ru"]);
+        datepicker.each(function(){
+            $(this).datepicker({
+                dateFormat: "dd/mm/yy"
+            });
+        });
+    }
+});

web/src/js/modules/header.js

@@ -0,0 +1,36 @@
+import $ from 'jquery';
+import {MOBILE_WIDTH} from "../constants";
+
+$(document).ready(function () {
+    let header = $('.js-header'),
+        menu = header.find('.js-header-menu'),
+        wrap = header.find('.js-header-wrap'),
+        close = header.find('.js-header-close'),
+        section = header.find('.js-header-section'),
+        list = header.find('.js-header-list');
+
+    menu.on('click', function(e){
+        if ($(window).width() < MOBILE_WIDTH) {
+            e.preventDefault();
+            wrap.addClass('visible');
+        }
+    });
+
+    close.on('click', function(e){
+        if ($(window).width() < MOBILE_WIDTH) {
+            e.preventDefault();
+            wrap.removeClass('visible');
+            $(window).scrollTop(0);
+        }
+    });
+
+    section.on('click', function(e){
+        if ($(window).width() < MOBILE_WIDTH) {
+            e.preventDefault();
+            let _this = $(this);
+
+            _this.toggleClass('open');
+            _this.next().slideToggle();
+        }
+    });
+});

web/src/js/modules/popup.js

@@ -0,0 +1,50 @@
+import $ from 'jquery';
+
+$(document).ready(function () {
+    let body = $('body'),
+        popup;
+
+    body.on('click', '[data-popup]', function(e){
+        e.preventDefault();
+        e.stopPropagation();
+
+        let data = $(this).data('popup');
+        popup = $(data);
+        showPopup();
+    });
+
+    $('.js-popup-close').on('click', function(e){
+        e.preventDefault();
+        hidePopup();
+    });
+
+    body.on('click', '.js-outer', function(){
+        if (popup !== undefined) {
+            hidePopup();
+        }
+    });
+
+    $('.js-popup-wrap').on('click', function(e){
+        e.stopPropagation();
+    });
+
+    $(document).keyup(function(e){
+      if (e.keyCode === 27) hidePopup();
+    });
+
+    function showPopup(){
+        body.addClass('no-scroll');
+        popup.addClass('open');
+        setTimeout(function(){
+            popup.addClass('visible');
+        }, 100);
+    }
+
+    function hidePopup(){
+        body.removeClass('no-scroll');
+        popup.removeClass('visible');
+        setTimeout(function(){
+            popup.removeClass('open');
+        }, 300);
+    }
+});

web/src/js/modules/search.js

@@ -0,0 +1,29 @@
+import $ from 'jquery';
+import {MOBILE_WIDTH} from "../constants";
+
+$(document).ready(function () {
+    let search = $('.js-search'),
+        input = search.find('.js-search-input'),
+        btn = search.find('.js-search-btn');
+
+    btn.on('click', function(e){
+        if ($(window).width() >= MOBILE_WIDTH) {
+            if (!search.hasClass('open')) {
+                e.preventDefault();
+            }
+            search.addClass('open');
+            setTimeout(function(){
+                input.focus();
+            }, 200);
+        }
+    });
+
+    search.on('click', function(e){
+        e.stopPropagation();
+    });
+
+    $(document).on('click', function(){
+        search.removeClass('open');
+        input.val('');
+    });
+});

web/src/js/modules/select.js

@@ -0,0 +1,44 @@
+import $ from 'jquery';
+
+$(document).ready(function () {
+    let select = $('.js-select');
+    if (select.length) {
+        select.each(function(){
+            let _this = $(this),
+                head = _this.find('.js-select-head'),
+                option = _this.find('.js-select-option'),
+                input = _this.find('.js-select-input');
+
+            head.on('click', function(e){
+                e.preventDefault();
+                e.stopPropagation();
+
+                if (_this.hasClass('active')) {
+                    _this.removeClass('active');
+                } else {
+                    select.removeClass('active');
+                    _this.addClass('active');
+                }
+            });
+
+            option.on('click', function(e){
+                e.preventDefault();
+                _this.addClass('selected');
+
+                let _thisOption = $(this),
+                    value = _thisOption.text();
+
+                head.text(value);
+
+                option.removeClass('active');
+                _thisOption.addClass('active');
+
+                input.val(value);
+            });
+        });
+
+        $(document).on('click', function(){
+            select.removeClass('active');
+        });
+    }
+});

web/src/js/modules/tabs.js

@@ -0,0 +1,24 @@
+import $ from 'jquery';
+
+$(document).ready(function () {
+    let tabs = $('.js-tabs');
+    if (tabs.length) {
+        tabs.each(function(){
+            let _this = $(this),
+                btn = _this.find('.js-tabs-btn'),
+                item = _this.find('.js-tabs-item');
+
+            btn.on('click', function(e){
+                e.preventDefault();
+
+                let _thisBtn = $(this),
+                    index = _thisBtn.index();
+
+                btn.removeClass('active');
+                _thisBtn.addClass('active');
+                item.hide();
+                item.eq(index).fadeIn();
+            });
+        });
+    }
+});

web/src/js/modules/toggle.js

@@ -0,0 +1,10 @@
+import $ from 'jquery';
+
+$(document).ready(function () {
+    $('.js-toggle-head').on('click', function(e){
+        e.preventDefault();
+        let _this = $(this);
+        _this.toggleClass('active');
+        _this.next().slideToggle();
+    });
+});

web/webpack.config.js

@@ -0,0 +1,58 @@
+const webpack = require('webpack');
+const path = require('path');
+const NODE_ENV = process.env.NODE_ENV || 'development';
+
+module.exports = {
+    entry: {
+        app: "./src/js/app.js"
+    },
+    output: {
+        path: path.join(__dirname, "build/js"),
+        filename: NODE_ENV === 'development' ? '[name].js' : '[name].[id].[chunkhash].js',
+        library: '[name]'
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.js$/,
+                exclude: /(node_modules|bower_components)/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: [
+                            ["env", {
+                              "targets": {
+                                "browsers": ["last 2 versions", "safari >= 7"]
+                              }
+                            }]
+                        ]
+                    }
+                }
+            }
+        ]
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                'NODE_ENV': JSON.stringify(NODE_ENV)
+            }
+        })
+    ],
+
+
+    watch: NODE_ENV === 'development',
+
+    devtool: NODE_ENV === 'development' ? 'source-map' : false
+};
+
+if (NODE_ENV === 'production') {
+    module.exports.plugins.push(
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false,
+                drop_console: true,
+                unsafe: true
+            }
+        })
+    );
+}