在线将 ES6 javascript 文件转换为 ES5

问题描述

我正在尝试将 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],};

      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,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','left') && 'left']: '15px','center') && 'left']: `${(root.clientWidth / 2) - (el.clientWidth / 2)}px`,'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,'data-position').indexOf(pos) > -1;
      const { left,width } = el.getBoundingClientRect();

      setStyles(el,{
        [hasPos(el,'left') && 'left']: `${width}px`,'center') && 'left']: `${left + width}px`,'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',options);
    }
  };

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

非常感谢您的反馈?

本

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）