ruby-on-rails - 在没有 webpack 的情况下使用 ActionText

Question

我尝试在 Rails 6 上使用旧方式资产管道（没有 Webpack）实现 ActionTest

几乎一切都很好，除了加载@rails/actiontext

在我的 application.js 我有

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

Riche 编辑器出现，我可以更改粗体/斜体文本，但无法添加图像（未上传）

我有一个 JS 错误：Uncaught SyntaxError: Cannot use import statement outside a module

在线：从actiontext中的attachment_uplaod.js中的“./attachment_upload”导入{AttachmentUpload}。

有什么方法可以在没有 webpack 的情况下实现这一点？

谢谢

Answer 1

我不知道官方的方式是什么，但我是这样做的，因为我正在等待更新的安装生成器：

先决条件

• 热线导轨

CSS

• 复制资产管道中的 CSS 文件 ( https://github.com/basecamp/trix/tree/main/dist )

JS 库

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

// app/assets/javascripts/libraries/actiontext@6.1.4.js
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/trix@1.3.1.js
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';

通过刺激导入

• 在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 的页面上，将 a 添加data-controller="trix"到相关 div
• 瞧！

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