尝试在 svelte 组件运行之前加载 js 文件答案

【问题标题】：Trying to load js file before svelte component runs尝试在 svelte 组件运行之前加载 js 文件
【发布时间】：2021-07-23 05:41:39
【问题描述】：

我正在尝试在我的 Svelte 组件运行之前加载一个 js 文件，并且我正在尝试这样做：

    <script>
  //prettier-ignore
  let press = 1200,temp = 25,rho = 0;
  //prettier-ignore
  function density() {
      const dens = Module.PropsSI("D","P",+press * 6894.75729,"T",+273.15 + temp,"Xenon");
    rho = dens;
    resolve(dens); // immediately
  }
</script>

<svelte:head>
  <script src="../public/coolprop.js" on:load={density}></script>
</svelte:head>

<main>
  {#await rho}
    <h1>Loading...</h1>
  {:then value}
    <p>Pressure is {press}, temperature is {temp}, density is {value}</p>
  {/await}
</main>

但我收到这样的错误：

Failed to init component
<App3>

create_fragment@http://localhost:8080/build/bundle.js:9218:5
init@http://localhost:8080/build/bundle.js:11084:37
App3@http://localhost:8080/build/bundle.js:9295:56
createProxiedComponent@http://localhost:8080/build/bundle.js:9075:9
ProxyComponent@http://localhost:8080/build/bundle.js:8648:92
Proxy<App3>@http://localhost:8080/build/bundle.js:8740:11
./src/main.js@http://localhost:8080/build/bundle.js:13659:13
__webpack_require__@http://localhost:8080/build/bundle.js:13696:33
@http://localhost:8080/build/bundle.js:14852:30
@http://localhost:8080/build/bundle.js:14856:12

这样做的正确方法是什么？我知道当我使用 index.html 中的coolprop.js 时此代码有效，但遇到了一个问题，即只有在代码更改时，HMR 才会触发正确答案，因此采用了这种方法。欢迎任何建议！我一直在努力解决这个问题.. 谢谢，甘尼-

好的，我尝试在组件运行之前加载coolprop.js，但显然它不起作用。这是我尝试过的代码。

<script>
  //prettier-ignore
  let press = 1200,temp = 25,rho=0;
  //prettier-ignore

  //prettier-ignore
  function prop (){
  let promise2 = new Promise(function (resolve, reject) {
    const dens = Module.PropsSI("D","P",+press * 6894.75729,"T",+273.15 + temp,"Xenon");
    rho = dens;
   // resolve(dens); // immediately
  });
}
  //prettier-ignore
  function prop1() {
    const dens = Module.PropsSI("D","P",+press * 6894.75729,"T",+273.15 + temp,"Xenon");
    rho = dens;
    console.log("rho inside prop1 is ", rho);
  }
  // onMount(test1);
</script>

<svelte:head>
  <script src="coolprop.js" on:load={prop1}></script>
</svelte:head>


<main>
  {#await rho}
    <h1>Loading...</h1>
  {:then value}
    <p>Pressure is {press}, temperature is {temp}, density is {value}</p>
  {/await}
</main>

我是否使用函数作为承诺似乎并不重要。我只有在我在 dev 中运行更多代码时调整代码时才能让它工作，而 HMR 会负责更改并且它可以工作。

我认为有一些微妙的错误，它困扰着我 :) 我认为 Svelte 大师的输入现在是有序的......

甘尼-

【问题讨论】：

标签： svelte webpack-hmr

【解决方案1】：

你能不能不要这样导入：

<script>
  import Whatever from '../public/coolprop.js';
  const value= Whatever.density()

</script>

密度是 {value}

【讨论】：