rollup.js svelte 捆绑包未在 index.html 中激活
rollup.js svelte bundle not activating in index.html
我正在尝试部署我的 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
}
};
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>
这是 chrome 控制台在 运行ning livereload 时的样子。汇总-c -w
这是 chrome 控制台在生产或其他服务器中的样子。 rollup -c 并只提供静态内容。我不确定 livereload 是否为 javascript 做了一些特殊的事情,但在我的其他服务器中,我确保为 public 文件夹提供服务。我可以在控制台中查看bundle.js。
好的,我已经解决了这个问题,但我不明白为什么。我将分享我的发现,并在我了解更多时返回更新。首先,我在生产中遇到问题的原因是我试图访问 {production_url}/index.html。无论出于何种原因,即使 html 可以检索所有必要的 javascript 和 css,我也无法通过调用 index.html 来精简前端。但是,一旦我修复了路由 {production_url}/ 的静态引用,它就正确地补充了我的应用程序。在 localhost 中可以看到相同的影响。 localhost:5000/ 正确补水,但 localhost:5000/index.html 不会补水。
我正在尝试部署我的 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
}
};
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>
这是 chrome 控制台在 运行ning livereload 时的样子。汇总-c -w
这是 chrome 控制台在生产或其他服务器中的样子。 rollup -c 并只提供静态内容。我不确定 livereload 是否为 javascript 做了一些特殊的事情,但在我的其他服务器中,我确保为 public 文件夹提供服务。我可以在控制台中查看bundle.js。
好的,我已经解决了这个问题,但我不明白为什么。我将分享我的发现,并在我了解更多时返回更新。首先,我在生产中遇到问题的原因是我试图访问 {production_url}/index.html。无论出于何种原因,即使 html 可以检索所有必要的 javascript 和 css,我也无法通过调用 index.html 来精简前端。但是,一旦我修复了路由 {production_url}/ 的静态引用,它就正确地补充了我的应用程序。在 localhost 中可以看到相同的影响。 localhost:5000/ 正确补水,但 localhost:5000/index.html 不会补水。