在没有 webpack 的情况下使用 ActionText

Posted 2023-03-07

【中文标题】在没有 webpack 的情况下使用 ActionText

【英文标题】：Using ActionText without webpack

【发布时间】：2021-01-23 07:37:40

【问题描述】：

我尝试在 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。这是一个愚蠢的差事。

【参考方案1】：

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

先决条件

热线导轨

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';

通过刺激导入

在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