Phoenix + jQuery 中的 Esbuild答案

【问题标题】：Esbuild in Phoenix + jQueryPhoenix + jQuery 中的 Esbuild
【发布时间】：2022-01-11 22:43:45
【问题描述】：

我目前使用 esbuild 加载我的静态资产。我将它与 package.json 文件一起使用来维护我的 javascript 插件。 jQuery 插件在我的 app.js 中可用，但在我的 node_modules 中不可用。 datepicker 模块错误：'jQuery 未定义'

在 webpack 中有一个 ProvidePlugin 模块可以解决这个问题。我应该如何使用 esbuild 做到这一点？

app.js

import jquery from "jquery";
window.jQuery = jquery;
window.$ = jquery;
$ = jquery;

import datepicker from "jquery-ui/ui/i18n/datepicker-nl-BE"

---->>>>> ReferenceError: jQuery is not defined at datepicker-nl-BE.js:13 <<<<<--------

dev.exs

  watchers: [
    #esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    node: ["esbuild.js", "--watch", cd: Path.expand("../assets", __DIR__)],
    node: ["sass-watch.js",
      cd: Path.expand("../assets", __DIR__),
      into: IO.stream(:stdio, :line),
      stderr_to_stdout: true
    ]
  ]

esbuild.js

const esbuild = require('esbuild')
const sassPlugin = require('esbuild-plugin-sass')

// Decide which mode to proceed with
let mode = 'build'
process.argv.slice(2).forEach((arg) => {
  if (arg === '--watch') {
    mode = 'watch'
  } else if (arg === '--deploy') {
    mode = 'deploy'
  }
})

const loader =
  {
    '.png': 'file',
    '.ttf': 'file'
  }

// Define esbuild options + extras for watch and deploy
let opts = {
  entryPoints: ['js/app.js'],
  bundle: true,
  logLevel: 'info',
  target: 'es2016',
  outdir: '../priv/static/assets',
  loader,
  plugins: [sassPlugin()]
}
if (mode === 'watch') {
  opts = {
    watch: true,
    sourcemap: 'inline',
    ...opts
  }
}
if (mode === 'deploy') {
  opts = {
    minify: true,
    ...opts
  }
}

// Start esbuild with previously defined options
// Stop the watcher when STDIN gets closed (no zombies please!)
esbuild.build(opts).then((result) => {
  if (mode === 'watch') {
    process.stdin.pipe(process.stdout)
    process.stdin.on('end', () => { result.stop() })
  }
}).catch((error) => {
  process.exit(1)
})

【问题讨论】：

标签： jquery node-modules phoenix esbuild

【解决方案1】：

好像用jquery-ui-dist解决了

【讨论】：