我目前正在我的phoenix项目中与esbuild战斗。我有一个heex模板,我想在上面使用Trumbowyg作为文本编辑器。首先,我尝试通过vendoring导入javascript文件,并在app.js
中执行import trumbowyg from '../vendor/trumbowyg.min.js
。
我原以为这对AlpineJs有用,但它没有,它抱怨缺少jQuery,所以我以同样的方式出售jQuery:import {jQuery, $} from '../vendor/jquery.min.js
。但没有成功。相同的错误消息Uncaught ReferenceError: $ is not defined
。
然后我想到了通过导入模板中带有<script>
标记的脚本来修复它,所以我只是把两个js文件扔到/priv/static/assets/文件夹中。
<script type="text/javascript" src={Routes.static_path(@conn, "/assets/jquery.min.js")}></script>
<script type="text/javascript" src={Routes.static_path(@conn, "/assets/trumbowyg.min.js")}></script>
但是这在生产中停止了工作(我使用Docker Deploy方法)。然后我尝试使用某种X1 M5 N1 X实现,但是我没有让它工作。
所以我现在的问题是:我如何在生产环境中加载这些脚本?最好知道如何配置esbuild以正确使用deploy脚本文件。我不知道要更改什么,因为我的AlpineJs导入工作正常。
import "phoenix_html"
// Establish Phoenix Socket and LiveView configuration.
import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar"
import Alpine from "../vendor/alpine.min"
window.Alpine = Alpine;
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
params: {_csrf_token: csrfToken},
dom: {
onBeforeElUpdated(from, to) {
if (from._x_dataStack) {
window.Alpine.clone(from, to)
}
}
}
})
// Show progress bar on live navigation and form submits
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
window.addEventListener("phx:page-loading-start", info => topbar.show())
window.addEventListener("phx:page-loading-stop", info => topbar.hide())
// connect if there are any LiveViews on the page
liveSocket.connect()
// expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket
这就是我的app.js文件的内容。但是就像我说的,添加:import trumbowyg from '../vendor/trumbowyg.min.js
或import {jQuery, $} from '../vendor/jquery.min.js
会得到类似Uncaught ReferenceError: $ is not defined
和Uncaught ReferenceError: jQuery is not defined
的错误。
感谢每一个帮助。先谢了。
1条答案
按热度按时间lc8prwob1#
不确定这是否是在Phoenix中最好的方法,但我所做的是使用
phx-hook
来实现这些目的。将其导入到
app.js
中,并将其添加到钩子中:设置好所有这些之后,使用
phx-hook
将其添加到活动组件根元素中导入的JS应该可以在该组件上工作。
希望能有所帮助。