rollup.js svelte 包未在 index.html 中激活

Question

rollup.js svelte 包未在 index.html 中激活

Rah*_*itt 5 javascript rollup server svelte

我正在尝试部署我的 svelte 项目，但在 livereload 插件之外激活捆绑 javascript 时遇到问题。当我运行 rollup -c -w 时，代码显示正常，但使用其他服务器为应用程序提供服务不会激活 javacsript。它至少应该在 console.log 中记录一些内容，并希望添加 html，但它只显示一个空白页面。

rollup.config.js

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import replace from "@rollup/plugin-replace";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";
import babel from "rollup-plugin-babel";

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js"
  },
  plugins: [
    babel({
      exclude: "node_modules/**"
    }),
   
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      css: css => {
        css.write("bundle.css");
      }
    }),

    postcss(),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration -
    // consult the documentation for details:
    // https://github.com/rollup/plugins/tree/master/packages/commonjs
    resolve({
      browser: true,
      dedupe: ["svelte"]
    }),
    commonjs(),

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload("public"),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser(),

    // for absolut imports
    // i.e., instead of
    // import Component  from "../../../../components/Component.svelte";
    // we will be able to say
    // import Component from "components/Component.svelte";
    aliases
  ],
  watch: {
    clearScreen: false
  }
};

Run Code Online (Sandbox Code Playgroud)

rollup -c 将输出bundle.js。我的index.html如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon.png" />
    <link rel="stylesheet" href="/build/bundle.css" />
    <link
      rel="stylesheet"
      href="/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css"
    />
    <link rel="stylesheet" href="/assets/styles/tailwind.css" />
    <title>Teach Me Sensei</title>

    <script>
      if (process === undefined) {
        var process = { env: {} };
      }
    </script>
  </head>

  <body class="text-gray-800 antialiased">
    <noscript>
      <strong
        >We're sorry but notus-svelte doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <script src="/build/bundle.js"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是运行 livereload 时 chrome 控制台的样子的图片。汇总-c -w

这是 chrome 控制台在生产或其他服务器中的样子的图片。rollup -c 并仅提供静态内容。我不确定 livereload 是否对 javascript 做了一些特殊的事情，但在我的其他服务器中，我确保提供公共文件夹。我可以在控制台中查看bundle.js。

Answer 1

Rah*_*itt 3

好吧，我已经解决了这个问题，但我不明白为什么。我将分享我的发现，并在我了解更多后返回更新。首先，我在生产中遇到问题的原因是我试图访问 {product_url}/index.html。无论出于何种原因，即使 html 可以检索所有必要的 javascript 和 css，我也无法通过调用 index.html 来简化前端。但是，一旦我修复了路线 {product_url}/ 的静态引用，它就可以正确地为我的应用程序提供水合。在本地主机中也可以看到相同的影响。localhost:5000/ 正确水合，但 localhost:5000/index.html 不会水合。

归档时间：	4 年，9 月前
查看次数：	1439 次
最近记录：	4 年，9 月前