jquery Elixir Phoenix从/priv/static提供Javascript

cbwuti44  于 2023-03-17  发布在  jQuery
关注(0)|答案(1)|浏览(112)

我目前正在我的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/文件夹中。

  1. <script type="text/javascript" src={Routes.static_path(@conn, "/assets/jquery.min.js")}></script>
  2. <script type="text/javascript" src={Routes.static_path(@conn, "/assets/trumbowyg.min.js")}></script>

但是这在生产中停止了工作(我使用Docker Deploy方法)。然后我尝试使用某种X1 M5 N1 X实现,但是我没有让它工作。
所以我现在的问题是:我如何在生产环境中加载这些脚本?最好知道如何配置esbuild以正确使用deploy脚本文件。我不知道要更改什么,因为我的AlpineJs导入工作正常。

  1. import "phoenix_html"
  2. // Establish Phoenix Socket and LiveView configuration.
  3. import {Socket} from "phoenix"
  4. import {LiveSocket} from "phoenix_live_view"
  5. import topbar from "../vendor/topbar"
  6. import Alpine from "../vendor/alpine.min"
  7. window.Alpine = Alpine;
  8. let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
  9. let liveSocket = new LiveSocket("/live", Socket, {
  10. params: {_csrf_token: csrfToken},
  11. dom: {
  12. onBeforeElUpdated(from, to) {
  13. if (from._x_dataStack) {
  14. window.Alpine.clone(from, to)
  15. }
  16. }
  17. }
  18. })
  19. // Show progress bar on live navigation and form submits
  20. topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
  21. window.addEventListener("phx:page-loading-start", info => topbar.show())
  22. window.addEventListener("phx:page-loading-stop", info => topbar.hide())
  23. // connect if there are any LiveViews on the page
  24. liveSocket.connect()
  25. // expose liveSocket on window for web console debug logs and latency simulation:
  26. // >> liveSocket.enableDebug()
  27. // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
  28. // >> liveSocket.disableLatencySim()
  29. window.liveSocket = liveSocket

这就是我的app.js文件的内容。但是就像我说的,添加:import trumbowyg from '../vendor/trumbowyg.min.jsimport {jQuery, $} from '../vendor/jquery.min.js会得到类似Uncaught ReferenceError: $ is not definedUncaught ReferenceError: jQuery is not defined的错误。
感谢每一个帮助。先谢了。

lc8prwob

lc8prwob1#

不确定这是否是在Phoenix中最好的方法,但我所做的是使用phx-hook来实现这些目的。

  1. import YourJSObject from 'your-lib'
  2. Trumbowyg = {
  3. mounted() {
  4. ....
  5. },
  6. updated(){
  7. ....
  8. }
  9. }
  10. export default Trumbowyg;

将其导入到app.js中,并将其添加到钩子中:

  1. let Hooks = { ..., Trumbowyg, ... }
  2. ...
  3. let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: Hooks})

设置好所有这些之后,使用phx-hook将其添加到活动组件根元素中

  1. <div id="some-id" class="some-classes" phx-hook="Trumbowyg">

导入的JS应该可以在该组件上工作。
希望能有所帮助。

展开查看全部

相关问题