在没有 webpack 的情况下使用 ActionText答案

【问题标题】：Using ActionText without webpack在没有 webpack 的情况下使用 ActionText
【发布时间】：2023-03-17 22:08:02
【问题描述】：

我尝试在 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 的情况下实现这一点？

谢谢

【问题讨论】：

你必须通过真正理解 ES6 导入的东西来传递 javascript ......比如 Webpack。这是一个愚蠢的差事。

标签： ruby-on-rails asset-pipeline actiontext

【解决方案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 的页面上，将 data-controller="trix" 添加到相关 div
瞧！

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

【讨论】：