use babel-preset-env

2468448474 · Jun 19, 2017 · e97dbf6 · e97dbf6
1 parent cf1fb6c
commit e97dbf6
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 133 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,5 +1,8 @@
 {
-  "presets": ["es2015", "stage-2"],
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
   "plugins": ["transform-runtime"],
   "comments": false
 }
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "babel-eslint": "7.2.3",
     "babel-loader": "7.0.0",
     "babel-plugin-transform-runtime": "6.23.0",
-    "babel-preset-es2015": "6.24.1",
+     "babel-preset-env": "1.5.2",
     "babel-preset-stage-2": "6.24.1",
     "babel-register": "6.24.1",
     "chalk": "1.1.3",

diff --git a/src/directive/sticky.js b/src/directive/sticky.js
@@ -1,99 +1,91 @@
-(function() {
-  const vueSticky = {};
-  let listenAction;
-  vueSticky.install = Vue => {
-    Vue.directive('sticky', {
-      inserted(el, binding) {
-        const params = binding.value || {},
-          stickyTop = params.stickyTop || 0,
-          zIndex = params.zIndex || 1000,
-          elStyle = el.style;
+const vueSticky = {};
+let listenAction;
+vueSticky.install = Vue => {
+  Vue.directive('sticky', {
+    inserted(el, binding) {
+      const params = binding.value || {},
+        stickyTop = params.stickyTop || 0,
+        zIndex = params.zIndex || 1000,
+        elStyle = el.style;
 
-        elStyle.position = '-webkit-sticky';
-        elStyle.position = 'sticky';
+      elStyle.position = '-webkit-sticky';
+      elStyle.position = 'sticky';
         // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
         // if (~elStyle.position.indexOf('sticky')) {
         //     elStyle.top = `${stickyTop}px`;
         //     elStyle.zIndex = zIndex;
         //     return
         // }
-        const elHeight = el.getBoundingClientRect().height;
-        const elWidth = el.getBoundingClientRect().width;
-        elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
+      const elHeight = el.getBoundingClientRect().height;
+      const elWidth = el.getBoundingClientRect().width;
+      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
 
-        const parentElm = el.parentNode || document.documentElement;
-        const placeholder = document.createElement('div');
-        placeholder.style.display = 'none';
-        placeholder.style.width = `${elWidth}px`;
-        placeholder.style.height = `${elHeight}px`;
-        parentElm.insertBefore(placeholder, el)
+      const parentElm = el.parentNode || document.documentElement;
+      const placeholder = document.createElement('div');
+      placeholder.style.display = 'none';
+      placeholder.style.width = `${elWidth}px`;
+      placeholder.style.height = `${elHeight}px`;
+      parentElm.insertBefore(placeholder, el)
 
-        let active = false;
+      let active = false;
 
-        const getScroll = (target, top) => {
-          const prop = top ? 'pageYOffset' : 'pageXOffset';
-          const method = top ? 'scrollTop' : 'scrollLeft';
-          let ret = target[prop];
-          if (typeof ret !== 'number') {
-            ret = window.document.documentElement[method];
-          }
-          return ret;
-        };
+      const getScroll = (target, top) => {
+        const prop = top ? 'pageYOffset' : 'pageXOffset';
+        const method = top ? 'scrollTop' : 'scrollLeft';
+        let ret = target[prop];
+        if (typeof ret !== 'number') {
+          ret = window.document.documentElement[method];
+        }
+        return ret;
+      };
 
-        const sticky = () => {
-          if (active) {
-            return
-          }
-          if (!elStyle.height) {
-            elStyle.height = `${el.offsetHeight}px`
-          }
+      const sticky = () => {
+        if (active) {
+          return
+        }
+        if (!elStyle.height) {
+          elStyle.height = `${el.offsetHeight}px`
+        }
 
-          elStyle.position = 'fixed';
-          elStyle.width = `${elWidth}px`;
-          placeholder.style.display = 'inline-block';
-          active = true
-        };
+        elStyle.position = 'fixed';
+        elStyle.width = `${elWidth}px`;
+        placeholder.style.display = 'inline-block';
+        active = true
+      };
 
-        const reset = () => {
-          if (!active) {
-            return
-          }
+      const reset = () => {
+        if (!active) {
+          return
+        }
 
-          elStyle.position = '';
-          placeholder.style.display = 'none';
-          active = false;
-        };
+        elStyle.position = '';
+        placeholder.style.display = 'none';
+        active = false;
+      };
 
-        const check = () => {
-          const scrollTop = getScroll(window, true);
-          const offsetTop = el.getBoundingClientRect().top;
-          if (offsetTop < stickyTop) {
-            sticky();
-          } else {
-            if (scrollTop < elHeight + stickyTop) {
-              reset()
-            }
+      const check = () => {
+        const scrollTop = getScroll(window, true);
+        const offsetTop = el.getBoundingClientRect().top;
+        if (offsetTop < stickyTop) {
+          sticky();
+        } else {
+          if (scrollTop < elHeight + stickyTop) {
+            reset()
           }
-        };
-        listenAction = () => {
-          check()
-        };
+        }
+      };
+      listenAction = () => {
+        check()
+      };
+
+      window.addEventListener('scroll', listenAction)
+    },
 
-        window.addEventListener('scroll', listenAction)
-      },
+    unbind() {
+      window.removeEventListener('scroll', listenAction)
+    }
+  })
+};
 
-      unbind() {
-        window.removeEventListener('scroll', listenAction)
-      }
-    })
-  };
-  if (typeof exports == 'object') {
-    module.exports = vueSticky
-  } else if (typeof define == 'function' && define.amd) {
-    define([], () => vueSticky)
-  } else if (window.Vue) {
-    window.vueSticky = vueSticky;
-    Vue.use(vueSticky)
-  }
-}());
+export default vueSticky
 
diff --git a/src/directive/waves.js b/src/directive/waves.js
@@ -1,54 +1,47 @@
 import './waves.css';
-(function() {
-  const vueWaves = {};
-  vueWaves.install = (Vue, options = {}) => {
-    Vue.directive('waves', {
-      bind(el, binding) {
-        el.addEventListener('click', e => {
-          const customOpts = Object.assign(options, binding.value);
-          const opts = Object.assign({
-              ele: el, // 波纹作用元素
-              type: 'hit', // hit点击位置扩散center中心点扩展
-              color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-            }, customOpts),
-            target = opts.ele;
-          if (target) {
-            target.style.position = 'relative';
-            target.style.overflow = 'hidden';
-            const rect = target.getBoundingClientRect();
-            let ripple = target.querySelector('.waves-ripple');
-            if (!ripple) {
-              ripple = document.createElement('span');
-              ripple.className = 'waves-ripple';
-              ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
-              target.appendChild(ripple);
-            } else {
-              ripple.className = 'waves-ripple';
-            }
-            switch (opts.type) {
-              case 'center':
-                ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
-                ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
-                break;
-              default:
-                ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
-                ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
-            }
-            ripple.style.backgroundColor = opts.color;
-            ripple.className = 'waves-ripple z-active';
-            return false;
+
+const vueWaves = {};
+vueWaves.install = (Vue, options = {}) => {
+  Vue.directive('waves', {
+    bind(el, binding) {
+      el.addEventListener('click', e => {
+        const customOpts = Object.assign(options, binding.value);
+        const opts = Object.assign({
+            ele: el, // 波纹作用元素
+            type: 'hit', // hit点击位置扩散center中心点扩展
+            color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+          }, customOpts),
+          target = opts.ele;
+        if (target) {
+          target.style.position = 'relative';
+          target.style.overflow = 'hidden';
+          const rect = target.getBoundingClientRect();
+          let ripple = target.querySelector('.waves-ripple');
+          if (!ripple) {
+            ripple = document.createElement('span');
+            ripple.className = 'waves-ripple';
+            ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
+            target.appendChild(ripple);
+          } else {
+            ripple.className = 'waves-ripple';
+          }
+          switch (opts.type) {
+            case 'center':
+              ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
+              ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
+              break;
+            default:
+              ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
+              ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
           }
-        }, false);
-      }
-    })
-  };
-  if (typeof exports == 'object') {
-    module.exports = vueWaves
-  } else if (typeof define == 'function' && define.amd) {
-    define([], () => vueWaves)
-  } else if (window.Vue) {
-    window.vueWaves = vueWaves;
-    Vue.use(vueWaves)
-  }
-}());
+          ripple.style.backgroundColor = opts.color;
+          ripple.className = 'waves-ripple z-active';
+          return false;
+        }
+      }, false);
+    }
+  })
+};
+
+export default vueWaves;