如何将Svelte集成到Phoenix 1.6+基于esbuild的开发工作流中

• 第一步：安装前端依赖
  进入项目的assets目录，安装所需依赖：
  cd assets && npm install esbuild esbuild-svelte svelte --save-dev

• 第二步：编写esbuild构建脚本
  在assets目录下新建build.js文件，内容如下：

const esbuild = require('esbuild')
const sveltePlugin = require('esbuild-svelte')

const args = process.argv.slice(2)
const watch = args.includes('--watch')
const deploy = args.includes('--deploy')

const opts = {
  entryPoints: ['js/app.js'],
  bundle: true,
  outdir: '../priv/static/assets',
  logLevel: 'info',
  plugins: [sveltePlugin({
    compilerOptions: {
      dev: !deploy
    }
  })]
}

if (deploy) {
  opts.minify = true
  opts.sourcemap = false
}

if (watch) {
  esbuild.context(opts).then(ctx => ctx.watch())
} else {
  esbuild.build(opts)
}

• 第三步：配置npm脚本
  修改assets目录下的package.json，新增scripts配置：

{
  "scripts": {
    "build": "node build.js",
    "watch": "node build.js --watch",
    "deploy": "node build.js --deploy"
  }
}

• 第四步：调整Phoenix配置

1. 注释或删除config/config.exs中原有的esbuild相关配置，避免冲突
2. 修改mix.exs中的aliases配置，调整资产构建逻辑：

defp aliases do
  [
    "assets.build": ["cmd cd assets && npm run build"],
    "assets.deploy": ["cmd cd assets && npm run deploy", "phx.digest"]
  ]
end

3. 修改config/dev.exs中的watchers配置，替换默认的esbuild监听：

config :your_app_name, YourAppName.Endpoint,
  watchers: [
    npm: ["run", "watch", cd: Path.expand("../assets", __DIR__)]
  ]

注意将配置中的your_app_name和YourAppName替换为实际的项目名称。

• 第五步：验证集成效果
  在assets/js目录下新建测试Svelte组件Test.svelte：

<h1>Hello Svelte in Phoenix!</h1>

修改assets/js/app.js，引入并挂载组件：

import Test from './Test.svelte'

new Test({
  target: document.getElementById('root')
})

在Phoenix的页面模板中添加id为root的DOM节点，启动mix phx.server即可看到Svelte组件渲染效果。

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