有没有办法将PureScript和Vite集成在一起？

Question

我使用

spago

将

src/Main.purs

构建为

output/Main/index.js

。
我正在尝试使用 Vite 作为捆绑工具，并已成功将

output/Main/index.js

加载到

src/main.ts

中。
Vite 可以导入图像文件，但我在 PureScript 中使用此功能时遇到问题。

我尝试过的方法是首先使用常规 JavaScript 导入图像文件，然后使用 PureScript 的 FFI 从 purs 文件中引用它。 但是，此方法不适用于以下错误消息：

[plugin:vite:import-analysis] Failed to resolve import "./typescript.svg" from "output/Constants/foreign.js". Does the file exist?

有什么好的解决办法吗？

---

/
├ public/
│ └ vite.svg
├ output/
├ src/
│ ├ Constant.js
│ ├ Constant.purs
│ ├ Main.purs
│ ├ main.ts
│ ├ style.css
│ ├ typescript.svg
│ └ vite-env.d.ts
├ index.html
├ package.json
├ spago.yaml
└ tsconfig.json

---

src/main.ts

：

import './style.css'

import { main } from "../output/Main";

main();

---

src/Constants.purs

：

module Constants
  ( typescriptlogo
  , vitelogo
  ) where

foreign import typescriptlogo :: String
foreign import vitelogo :: String

---

src/Constants.js

：

import typescriptlogo from './typescript.svg'
import vitelogo from '/vite.svg'

export { typescriptlogo, vitelogo }

---

src/Main.purs

：

module Main where

import Prelude

import Constants (vitelogo)
import Effect (Effect)
import Effect.Console (log)
import Halogen (liftEffect)
import Halogen as H
import Halogen.Aff as HA
import Halogen.HTML as HH
import Halogen.HTML.Properties as HP
import Halogen.VDom.Driver (runUI)

type State = Unit

component :: forall query input output m. H.Component query input output m
component =
  H.mkComponent
    { initialState
    , render
    , eval
    }
  where
  initialState :: input -> State
  initialState _ = unit

  render :: forall w i. State -> HH.HTML w i
  render _ =
    HH.div []
      [ HH.a
          [ HP.href "https://vitejs.dev"
          ]
          [ HH.img [ HP.src vitelogo ] ]
      ]

  eval = H.mkEval H.defaultEval

main :: Effect Unit
main = HA.runHalogenAff do
  body <- HA.awaitBody
  _io <- runUI component unit body

  liftEffect $ log $ "Application Start"

Answer 1

这是一个非常烦人的问题，Spago 和 Vite 不太可能很快解决，因为这两个项目的理念在这里发生了冲突。

我目前找到的唯一解决方案是利用

vite

从项目的根解决的事实。所以我们必须使用项目根目录的绝对路径：

import typescriptlogo from '/src/typescript.svg'
import vitelogo from '/vite.svg'

export { typescriptlogo, vitelogo }

应该可以。当然，每次更改项目结构时管理起来都很痛苦，所以我不会称这是一个令人满意的解决方案。