在不使用webpack的情况下使用ActionText

Question

我尝试在Rails 6中不使用Webpack，采用旧的asset pipeline实现ActionTest。

几乎所有的东西都很好，除了@rails/actiontext的加载。

在我的application.js文件中，我有以下代码：

//= require trix
//= require @rails/actiontext

富文本编辑器已经显示出来了，我可以更改加粗/斜体文本，但是无法添加图片（未上传）

我遇到了JS错误：Uncaught SyntaxError：Cannot use import statement outside a module

在actiontext中的attachment_upload.js文件中的import { AttachmentUpload } from "./attachment_upload"行上。

有没有方法可以不使用webpack实现这一点？

谢谢

- Olivier

---

你需要将 JavaScript 通过一些真正理解 ES6 导入的东西传递，比如 Webpack。这是一个愚蠢的任务。 - max

Answer 1

通过将 actiontext 脚本复制到自定义文件中并删除导入和导出，使 Action Text 正常工作。

其次，您需要在 application.js 中 require activestorage 以使用 DirectUpload。

application.js

//= require trix
//=# require @rails/actiontext
//= require activestorage
//= require actiontext

actiontext.js

// Copied from node_modules/@rails/actiontext/app/javascript/actiontext/attachment_upload.js
class AttachmentUpload {
  constructor(attachment, element) {
    this.attachment = attachment;
    this.element = element;
    // Requires `require activestorage` in application.js
    this.directUpload = new ActiveStorage.DirectUpload(
      attachment.file,
      this.directUploadUrl,
      this
    );
  }

  start() {
    this.directUpload.create(this.directUploadDidComplete.bind(this));
  }

  directUploadWillStoreFileWithXHR(xhr) {
    xhr.upload.addEventListener("progress", event => {
      const progress = (event.loaded / event.total) * 100;
      this.attachment.setUploadProgress(progress);
    });
  }

  directUploadDidComplete(error, attributes) {
    if (error) {
      throw new Error(`Direct upload failed: ${error}`);
    }

    this.attachment.setAttributes({
      sgid: attributes.attachable_sgid,
      url: this.createBlobUrl(attributes.signed_id, attributes.filename)
    });
  }

  createBlobUrl(signedId, filename) {
    return this.blobUrlTemplate
      .replace(":signed_id", signedId)
      .replace(":filename", encodeURIComponent(filename));
  }

  get directUploadUrl() {
    return this.element.dataset.directUploadUrl;
  }

  get blobUrlTemplate() {
    return this.element.dataset.blobUrlTemplate;
  }
}

// Copied from node_modules/@rails/actiontext/app/javascript/actiontext/index.js
addEventListener("trix-attachment-add", event => {
  const { attachment, target } = event;

  if (attachment.file) {
    const upload = new AttachmentUpload(attachment, target);
    upload.start();
  }
});

这仍然使用ES6语法，因此如果您想支持旧版浏览器并且没有使用Babel，则可能需要将其重写或转译为ES5。

- sn3p

Answer 2

我不知道官方的做法是什么，但我按照这种方式进行了操作，因为我在等待更新的安装生成器：

先决条件

• hotwire-rails

CSS

• 将CSS文件复制到您的资产管道中（https://github.com/basecamp/trix/tree/main/dist）

JS库

• 在app/assets/javascripts/libraries中创建这两个文件
• 更新的内容可以在https://www.skypack.dev上找到

// app/assets/javascripts/libraries/[e-mail]
export * from 'https://cdn.skypack.dev/pin/@rails/actiontext@v6.1.4-znF92tREya92yxvegJvq/mode=imports/optimized/@rails/actiontext.js';
export { default } from 'https://cdn.skypack.dev/pin/@rails/actiontext@v6.1.4-znF92tREya92yxvegJvq/mode=imports,min/optimized/@rails/actiontext.js';

// app/assets/javascripts/libraries/[e-mail]
export * from 'https://cdn.skypack.dev/pin/trix@v1.3.1-EGGvto9zyvcAYsikgQxN/mode=imports/optimized/trix.js';
export { default } from 'https://cdn.skypack.dev/pin/trix@v1.3.1-EGGvto9zyvcAYsikgQxN/mode=imports,min/optimized/trix.js';

通过 Stimulus 导入

• 在 app/assets/javascripts/controllers 目录下创建此文件。

//app/assets/javascripts/controllers/trix_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    import("actiontext").catch(err => null)
    import("trix").catch(err => null)
  }
}

在需要加载trix/action_text的页面上，将data-controller="trix"添加到相关的div中即可。 嗨，完成了！

https://github.com/rails/rails/issues/41221#issuecomment-871853505

- Lomig