jquery Elixir Phoenix从/priv/static提供Javascript

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

我目前正在我的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.jsimport {jQuery, $} from '../vendor/jquery.min.js会得到类似Uncaught ReferenceError: $ is not definedUncaught ReferenceError: jQuery is not defined的错误。
感谢每一个帮助。先谢了。

lc8prwob

lc8prwob1#

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

import YourJSObject from 'your-lib'
Trumbowyg = {
    mounted() {
        ....
    },
    updated(){ 
        ....
     }
}
export default Trumbowyg;

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

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

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

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

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

相关问题