Javascript 从Coffeescript到使用Rails webpacker的ES6，如何管理类？

我不是一个熟练的javascript专家。 我正在将一个非常旧的应用程序迁移到webpacker。 我有很多像这样的咖啡脚本文件：

class @SectionTable
  constructor: ->
    @table  = $('#site_section')
    @_dnd()

  _dnd: ->
    @table.tableDnD onDrop: (table, row) ->
      data = $.tableDnD.serialize()
      $.ajax
        type: 'POST'
        url: '/admin/sections/reorder'
        data: data

$ -> new SectionTable()

我已经在webpacker中为我的Javascript文件创建了一个结构

我有一些特定于页面的脚本和一些全局脚本，我可以使用类似这样的init.js文件初始化它们

import timePicker from './timePicker.js';
import Redactor from './redactor.js';

(function init() {
  const dtPicker = timePicker();
  const redactor = Redactor();
  document.addEventListener("turbolinks:load", () => {
    dtPicker.init();
    redactor.init();
  });
}());

然后，在timePicker.js中，我初始化单个组件

import 'bootstrap-datetime-picker/js/bootstrap-datetimepicker.js';
import 'bootstrap-datetime-picker/js/locales/bootstrap-datetimepicker.it.js';

const timePicker = () => {
    const initDateTimePicker = () => {
      const dateTime = $('.datetime');
      if (dateTime.length > 0) {
        $('.datetime').datetimepicker({
           todayHighlight: true,
           autoclose: true,
           pickerPosition: 'bottom-left',
           todayBtn: true,
           format: 'hh:ii dd/mm/yyyy'
         });
      }
    };
    const init = () => {
      initDateTimePicker();
   };
   return {
     init,
   };
};

export default timePicker;

我找不到在新逻辑中调整coffeescript对象的方法。 上面的coffeescript非常简单，但我也有一些复杂的对象，比如：

class @SectionTable
  constructor: ->
    @table  = $('#site_section')
    @_dnd()

  _dnd: ->
    @table.tableDnD onDrop: (table, row) ->
      data = $.tableDnD.serialize()
      $.ajax
        type: 'POST'
        url: '/admin/sections/reorder'
        data: data

$ -> new SectionTable()

@封面={}

class Cover.Preview
  constructor: ->
    @elements    = {} # preview elements, for each tab/preview box
    @element     = $('#cover_format')
    @container   = $('#cover_preview')
    @button      = $('#change_format')
    @url         = @element.data('url')
    @setFormat()
    @bindChange()

  addElement: (element, position) ->
    position = element.position
    @elements[position] = element

  bindChange: ->
    @button.click (event) =>
      event.preventDefault()
      @setFormat()
      $.ajax
        url:      "#{@url}?format=#{@format}"
        dataType: 'html'
        success: (html) =>
          @container.html html
          @rebindDrag()
          @repopulate()

  setFormat: -> @format = @element.val()

  rebindDrag: ->
    Cover.FormElement.init()
    Cover.Preview.Tile.init()

  repopulate: ->
    for position, tile of Cover.Preview.Tile.all
      tile.redraw Cover.preview.elements[position]



$ ->
  Cover.preview = new Cover.Preview()

我知道我有两种方法可以做到这一点：

1） 保留coffeescript并在webpacker中添加coffeescript文件加载器，但我无法理解如何在Init文件中初始化我的coffeescript定义的对象（而不是像现在这样在coffeescript文件中）

2） 从咖啡转换到ES6，我尝试使用在线工具，我得到了这个结果

this.SectionTable = class SectionTable {
  constructor() {
    this.table  = $('#dday_section');
    this._dnd();
  }

  _dnd() {
    return this.table.tableDnD({onDrop(table, row) {
      const data = $.tableDnD.serialize();
      return $.ajax({
        type: 'POST',
        url: '/admin/sections/reorder',
        data
      });
    }
    });
  }
};

$(() => new SectionTable());

如何添加模块化方法？因此，基本上我想在init文件中创建新的

分区表。
只是一个示例：

import $ from 'jquery';

export class SectionTable {
  constructor() {
   this.table = $('#site_section');
   this._dnd();
}
  _dnd() {
   this.table.tableDnD.onDrop((table, row) => {
      const data = $.tableDnD.serialize();
      $.ajax({
        type: 'POST',
        url: '/admin/sections/reorder',
        data: data
      });
   });
  }
}
// if you need a single instance like seems to from your code
export default new SectionTable();

只要对对象方法的“this”充满信心。如果需要传递它，请在构造函数中绑定它

constructor() {
   this.someMethod = this.someMethod.bind(this);

}
attachListener(){
   $('button').click(this.someMethod);
}
somemethod(){
// correct this
}


你不需要再在esm模块中生活了