Phoenix项目：esbuild配置及生产环境加载jQuery、Trumbowyg问题求助

一、修复生产环境静态资源加载失效问题 #

如果坚持用模板<script>标签直接引入的方式，需从两方面排查：

• Docker构建配置：确保Dockerfile中包含静态文件复制步骤，且执行了静态资源哈希处理：

  # 构建前端资源
  RUN cd assets && npm install && npm run deploy && cd ..
  # 生成哈希化静态资源（生产环境必须）
  RUN mix phx.digest
  # 复制静态资源到镜像发布目录
  COPY priv/static/ ./priv/static/
  

• Plug.Static配置：在lib/your_app_web/endpoint.ex中确认assets目录被包含在静态资源白名单：

  plug Plug.Static,
    at: "/",
    from: :your_app,
    gzip: true,
    only: ~w(assets fonts images favicon.ico robots.txt)
  

二、通过esbuild正确集成jQuery+Trumbowyg（推荐方案） #

之前直接导入vendor文件报错$ is not defined，核心原因是jQuery未挂载到全局window对象，Trumbowyg依赖全局的$变量。按以下步骤配置即可解决：

步骤1：导入并全局暴露jQuery #

无论使用npm包还是本地vendor文件，都要先把jQuery挂载到全局：

import "phoenix_html"
import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar"
import Alpine from "../vendor/alpine.min"

// 导入jQuery（npm包或本地文件二选一）
import $ from 'jquery' // npm包方式
// import $ from '../vendor/jquery.min.js' // 本地vendor文件方式

// 挂载到全局，让Trumbowyg能找到
window.jQuery = window.$ = $

// 导入Trumbowyg（同样二选一）
import trumbowyg from 'trumbowyg' // npm包方式
// import '../vendor/trumbowyg.min.js' // 本地vendor文件方式

// 导入Trumbowyg样式（根据来源选择）
// import 'trumbowyg/dist/ui/trumbowyg.css' // npm包样式
// import "../css/vendor/trumbowyg.min.css" // 本地样式文件

window.Alpine = Alpine;
Alpine.start()

// 以下LiveSocket配置保持不变
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)
        }
      }
    }
  })

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())

liveSocket.connect()
window.liveSocket = liveSocket

步骤2：生产环境构建验证 #

执行以下命令完成前端资源打包和静态资源哈希处理：

cd assets && npm run deploy && cd ..
mix phx.digest

确保Docker构建流程中包含上述命令，避免资源路径不匹配。

三、LiveView场景补充配置 #

如果在LiveView组件中使用Trumbowyg，需通过钩子在组件挂载后初始化编辑器：

<textarea id="content-editor" phx-hook="InitTrumbowyg"></textarea>

在app.js的LiveSocket配置中添加钩子：

let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  dom: { /* ... */ },
  hooks: {
    InitTrumbowyg: {
      mounted() {
        $(this.el).trumbowyg()
      }
    }
  }
})

内容的提问来源于stack exchange，提问作者Echon