Javascript 将代码转换为ES6模块

我刚刚开始学习es6模块系统。我有一些es5 javascript代码，我想转换成es6模块。有3个javascript文件

工作流设计器.js

var WorkflowDesigner = (function () {
  var constructor = function (element, options) {
    var component = this;
    if ($(element).hasClass('panel')) {
      component.panel = $(element);
    } else {
      component.panel = $(element).closest('.panel');
    }
  };

  extend(Object, constructor, {
    getWorkflowName: function () {
      return 'WorkflowName001';
    },

    nextStep: function () {
      var o = {};
      o['id'] = -1;
      //some code here
      return o;
    },

    prevStep: function () {
      var o = {};
      o['id'] = -1;
      //some code here
      return o;
    }
  });

  return constructor;

})();

(function ($) {    
    $.fn.createWorkflowDesigner = function (options) {
        debugger;
        return this.map(function (index, element) {
            return new WorkflowDesigner($(element), options);
        });
    };

}(jQuery));

function extend(parent, child, methods) {
    debugger;
    let Surrogate = function () {};
    Surrogate.prototype = parent.prototype;
    child.prototype = new Surrogate();
    child.prototype.constructor = child;
    // Add a reference to the parent's constructor
    child.parentConstructor = parent;

    // Copy the methods passed in to the prototype
    for (let name in methods) {
        if (methods.hasOwnProperty(name)) {
            child.prototype[name] = methods[name];
        }
    }
    // so we can define the constructor inline
    return child;
}

extend.js

var WorkflowDesigner = (function () {
  var constructor = function (element, options) {
    var component = this;
    if ($(element).hasClass('panel')) {
      component.panel = $(element);
    } else {
      component.panel = $(element).closest('.panel');
    }
  };

  extend(Object, constructor, {
    getWorkflowName: function () {
      return 'WorkflowName001';
    },

    nextStep: function () {
      var o = {};
      o['id'] = -1;
      //some code here
      return o;
    },

    prevStep: function () {
      var o = {};
      o['id'] = -1;
      //some code here
      return o;
    }
  });

  return constructor;

})();

(function ($) {    
    $.fn.createWorkflowDesigner = function (options) {
        debugger;
        return this.map(function (index, element) {
            return new WorkflowDesigner($(element), options);
        });
    };

}(jQuery));

function extend(parent, child, methods) {
    debugger;
    let Surrogate = function () {};
    Surrogate.prototype = parent.prototype;
    child.prototype = new Surrogate();
    child.prototype.constructor = child;
    // Add a reference to the parent's constructor
    child.parentConstructor = parent;

    // Copy the methods passed in to the prototype
    for (let name in methods) {
        if (methods.hasOwnProperty(name)) {
            child.prototype[name] = methods[name];
        }
    }
    // so we can define the constructor inline
    return child;
}

还有第三个文件utils.js，其中包含以下扩展方法

if (!Array.prototype.find) {
    Array.prototype.find = function (predicate) {
        //some code here

    }
}

if (!Array.prototype.doSomething) {
    Array.prototype.doSomething = function (predicate) {
        //some code here

    }
}

$(document).keyup(function (event) {
    //somthing here.        
});

我知道要将代码转换为es6模块，我只需在extend.js文件中导出

extend

函数，如

export function extend（…）

。但是，我不能100%确定如何将工作流设计器和utils.js转换为es6模块

我想我需要以下类似的东西才能将我的workflow-designer.js转换为es6模块：

export default function workflowDesigner() {
    let constructor = function (element, options) {
        options = options || {};
        let component = this;
        if ($(element).hasClass('panel')) {
            component.panel = $(element);
        } else {
            component.panel = $(element).closest('.panel');
        }
    };
    //rest of the code here....

    return constructor;

};

请让我知道我是否朝着正确的方向前进

更新： 根据@Bergi的建议，我更改了

extend

函数，如下所示：

export default function extend(parent, child, methods) {

  child.prototype = Object.create(parent.prototype);
  child.prototype.constructor = child;

  // Add a reference to the parent's constructor
  child.parentConstructor = parent;

  // Copy the methods passed in to the prototype
  Object.assign(child, methods);

  // so we can define the constructor inline
  return child;
} 

但是，现在我收到错误消息“workflowDesigner.getWorkflowName不是函数”

---

在调试模式下，我可以看到此函数在

workflowDesigner.\uuuu proto\uuuu.constructor.getWorkflowName

上可用。使用旧代码，它可以正常工作。

只需从模块模式中删除IIFE即可-ES6模块有自己的作用域

import extend from './extend.js';

export default function WorkflowDesigner(element, options) {
  if ($(element).hasClass('panel')) {
    this.panel = $(element);
  } else {
    this.panel = $(element).closest('.panel');
  }
}

extend(Object, WorkflowDesigner, {
  getWorkflowName: () => 'WorkflowName001',
  …
});

const $ = jQuery; // you might want to solve this with a proper `import`
$.fn.createWorkflowDesigner = function (options) {
  debugger;
  return this.map(function (index, element) {
    return new WorkflowDesigner($(element), options);
  });
};

---

只需从模块模式中删除IIFE—ES6模块有自己的作用域

import extend from './extend.js';

export default function WorkflowDesigner(element, options) {
  if ($(element).hasClass('panel')) {
    this.panel = $(element);
  } else {
    this.panel = $(element).closest('.panel');
  }
}

extend(Object, WorkflowDesigner, {
  getWorkflowName: () => 'WorkflowName001',
  …
});

const $ = jQuery; // you might want to solve this with a proper `import`
$.fn.createWorkflowDesigner = function (options) {
  debugger;
  return this.map(function (index, element) {
    return new WorkflowDesigner($(element), options);
  });
};

---

我认为您绝对不应该在名为util.js的文件中使用

$（document）.keyup（…）

。当移动到ES6时，您还需要使用

类

语法。此外，您不需要

扩展（对象，…）

-这是默认设置。只需将

Object.assign（）

方法

分配到原型上即可。哦，使用ES5
Object.create
而不是
subrogate
constructor的东西。所以你说的extend.js中的函数是我需要用
child.prototype=Object.create（parent.prototype）替换
subrogate
的东西
和
child.prototype.constructor=child然后使用
Object.assign（子对象，方法）复制方法。我说的对吗？您还提到我不需要扩展（对象，…）
，因为这是默认值。现在在我的应用程序中，extend.js文件中的
extend
函数总是像
extend（Object，constructor，{……}）
一样被调用。因此，从外观上看，我不需要
subrogate
或
child.prototype=Object.create（parent.prototype）完全正确。这是真的吗？是的，确实如此。我认为您绝对不应该在名为util.js的文件中包含
$（document）.keyup（…）
。当移动到ES6时，您还需要使用
类
语法。此外，您也不应该需要
extend（Object，
）-这是默认值。只需将
Object.assign（）
方法
分配到原型上即可。哦，使用ES5
Object.create
而不是
subrogate
constructor的东西。所以你说的extend.js中的函数是我需要用
child.prototype=Object.create（parent.prototype）替换
subrogate
的东西
和
child.prototype.constructor=child然后使用
Object.assign（子对象，方法）复制方法。我说的对吗？您还提到我不需要扩展（对象，…）
，因为这是默认值。现在在我的应用程序中，extend.js文件中的
extend
函数总是像
extend（Object，constructor，{……}）
一样被调用。因此，从外观上看，我不需要
subrogate
或
child.prototype=Object.create（parent.prototype）完全正确。是真的吗？是的，确实是这样。我听从了你的建议，效果很好。但是，如果使用Object.assign将方法分配给原型，扩展函数将无法正常工作。请查看更新后的问题，您仍然希望将其分配给
child.prototype
，而不是
child
，我遵循了您的建议，效果非常好。但是，如果使用Object.assign将方法分配给原型，扩展函数将无法正常工作。请查看更新后的问题，您仍然希望将其分配给
child.prototype
，而不是
child