如何使用webpacker在rails6中包含cropperjs库

gem install rails
rails new myapp --webpack

gem 'cropperjs-rails'

import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

window.Cropper = Cropper;

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

<%= form_with(model: @image, local: true) do |form| %>
  <%= form.file_field :image %>
  <%= form.button '裁剪', id: 'crop-button' %>
<% end %>

document.addEventListener('DOMContentLoaded', () => {
  const imageInput = document.querySelector('#image_image');
  const cropButton = document.querySelector('#crop-button');

  cropButton.addEventListener('click', () => {
    const image = document.createElement('img');
    const reader = new FileReader();

    reader.onload = (e) => {
      image.src = e.target.result;

      image.onload = () => {
        const cropper = new Cropper(image, {
          aspectRatio: 1,
          viewMode: 1,
          crop: (event) => {
            // 处理裁剪事件
          },
        });
      };
    };

    reader.readAsDataURL(imageInput.files[0]);
  });
});