在没有webpack的情况下使用ActionText

Question

我试着在rails 6上用旧的资产管道实现ActionTest (没有Webpack)

除了加载@rails/actiontext之外，几乎所有的都是好的

在我的application.js中，我

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

riche编辑器出现，我可以更改粗体/斜体文本，但不能添加图像(未上载)

我有一个JS错误:未捕获SyntaxError:无法在模块外使用导入语句

on line : import { AttachmentUpload } from "./attachment_upload“from attachment_uplaod.js in actiontext。

没有webpack，有没有办法做到这一点？

谢谢

Answer 1

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

先决条件

• hotwire-rails

CSS

• 在您的资产管道(https://github.com/basecamp/trix/tree/main/dist)

中复制CSS文件

JS库

可在https://www.skypack.dev上找到这两个files

• Updated内容：
• In app/assets/javascripts/libraries create

// 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