在线将 ES6 javascript 文件转换为 ES5

Question

我正在尝试将 ES6 javascript 文件转换为 ES5，因为我需要针对旧浏览器（即：Android 4.4.2 上的 webview）。

我已经看到 Babeljs.io 提供了一个工具来进行转换，但输出代码似乎无效... (see here)

知道如何实现这种转换（仅一次）吗？

相关文件是 siiimple-toast.js（一个 toast 通知插件）

/*  success + alert + warning + message */
  var setStyles = (el, styles) => {
    Object.keys(styles).forEach((key) => {
      el.style[key] = styles[key];
    });
  };

  const setAttrs = (el, attrs) => {
    Object.keys(attrs).forEach((key) => {
      el.setAttribute(key, attrs[key]);
    });
  };

  const getAttr = (el, attr) => el.getAttribute(attr);

  const privateKeys = {
    defaultOptions: Symbol('defaultOptions'),
    render: Symbol('render'),
    show: Symbol('show'),
    hide: Symbol('hide'),
    removeDOM: Symbol('removeDOM'),
  };

  const siiimpleToast = {
    [privateKeys.defaultOptions]: {
      container: 'body',
      class: 'siiimpleToast',
      position: 'top|center',
      margin: 15,
      delay: 0,
      duration: 3000,
      style: {},
    },

    setOptions(options = {}) {
      return {
        ...siiimpleToast,
        [privateKeys.defaultOptions]: {
          ...this[privateKeys.defaultOptions],
          ...options,
        },
      };
    },

    [privateKeys.render](state, message, options = {}) {
      const mergedOptions = {
        ...this[privateKeys.defaultOptions],
        ...options,
      };

      const {
        class: className,
        position,
        delay,
        duration,
        style,
      } = mergedOptions;

      const newToast = document.createElement('div');

      // logging via attrs
      newToast.className = className;

      var toatsLoaded=1;
      newToast.innerHTML = '<span class="toastIcon '+state+'">';

      setAttrs(newToast, {
        'data-position': position,
        'data-state': state,
      });
      setStyles(newToast, style);
      // use .setTimeout() instead of $.queue()
      let time = 0;
      setTimeout(() => {
        this[privateKeys.show](newToast, mergedOptions);
      }, time += delay);
      setTimeout(() => {
        this[privateKeys.hide](newToast, mergedOptions);
      }, time += temps);

      // support method chaining
      return this;
    },

    [privateKeys.show](el, { container, class: className, margin }) {
      const hasPos = (v, pos) => getAttr(v, 'data-position').indexOf(pos) > -1;

      const root = document.querySelector(container);
      root.insertBefore(el, root.firstChild);

      // set initial position
      setStyles(el, {
        position: container === 'body' ? 'fixed' : 'absolute',
        [hasPos(el, 'top') ? 'top' : 'bottom']: '-100px',
        [hasPos(el, 'left') && 'left']: '15px',
        [hasPos(el, 'center') && 'left']: `${(root.clientWidth / 2) - (el.clientWidth / 2)}px`,
        [hasPos(el, 'right') && 'right']: '15px',
      });

      setStyles(el, {
        transform: 'scale(1)',
        opacity: 1,
      });

      // distance de départ 
      let pushStack = 20;

      Array
        .from(document.querySelectorAll(`.${className}[data-position="${getAttr(el, 'data-position')}"]`))
        .filter(toast => toast.parentElement === el.parentElement)// matching container
        .forEach((toast) => {
          setStyles(toast, {
            [hasPos(toast, 'top') ? 'top' : 'bottom']: `${pushStack}px`,
          });

          pushStack += toast.offsetHeight + margin;
        });
    },

    [privateKeys.hide](el) {
      const hasPos = (v, pos) => getAttr(v, 'data-position').indexOf(pos) > -1;
      const { left, width } = el.getBoundingClientRect();

      setStyles(el, {
        [hasPos(el, 'left') && 'left']: `${width}px`,
        [hasPos(el, 'center') && 'left']: `${left + width}px`,
        [hasPos(el, 'right') && 'right']: `-${width}px`,
        opacity: 0,
      });

      const whenTransitionEnd = () => {
        this[privateKeys.removeDOM](el);
        el.removeEventListener('transitionend', whenTransitionEnd);
      };

      el.addEventListener('transitionend', whenTransitionEnd);
    },

    [privateKeys.removeDOM](el) {// eslint-disable-line
      const parent = el.parentElement;
      parent.removeChild(el);
    },
    default(message, options) {
      return this[privateKeys.render]('default', message, options);
    }
  };

  $(document).on('click', '.toastClose', function(e){
    e.preventDefault();
      $(this).parent('.siiimpleToast').remove();
  });

非常感谢您的反馈?

本