在Sails节点服务器上使用Svelte构建
在Sails节点服务器上使用Svelte构建
提问于 2020-06-18 23:27:31
我试图建立一个网站与frontEnd和赛尔斯的后端与斯维尔特。我的问题是我不能显示我的Svelte公共构建作为我的Sails默认网页。我想让组织保持在下面(或者类似的东西)，当我进入'http://myserver:1337‘而不是默认的赛尔斯页面时，我有我的Svelte公共构建页面：file organization
PS:我使用的是Node: v14.4.0，Sails: v1.2.4和Svelte: v6.14.5。感谢所有人:)
回答 2
Stack Overflow用户
发布于 2020-06-19 06:16:13
您可以尝试如下所示：
- 编译Svelt以构建到Sails.js上的/public目录中。
打开您的rollup.config.js并将您的public/build/bundle.js和public/build.bundle.css的路径更改为public sails路径，即"../server/public...“。
任务配置/
- /Pipeline.js以包含已编译的js和css文件：
// tasks/pipeline.js
var cssFilesToInject = [
'css/**/global.css',
'css/**/bundle.css',
'css/**/*.css',
];
var jsFilesToInject = [
'js/**/bundle.js',
'js/**/*.js'
];- 创建一个控制器来加载索引文件：
// router.js
'/*': { action: 'index', skipAssets: true, skipRegex: /^\/api\/.*$/ },排除的"/api“路由允许您配置CRUD路由。
- 索引控制器：
module.exports = {
friendlyName: 'View homepage',
description: 'Display a compiled index page',
exits: {
success: {
statusCode: 200,
viewTemplatePath: 'pages/index'
},
},
fn: async function () {
return {};
}
};在索引页面中，您可以包含模板index.html或创建自己的index.ejs来加载静态内容，这与您之前配置的相同：
// views/templates/template.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<!--TEMPLATES-->
<!--TEMPLATES END-->
<%- body %>
<!-- exposeLocalsToBrowser ( ) %>
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>和index.ejs：
// views/pages/index.ejs
<!-- Nothing here I mean -->Stack Overflow用户
发布于 2020-06-19 22:23:30
谢谢你的回答，这有助于我理解它是如何工作的。我很抱歉，但我没有完全按照您的教程(因为我不能理解我应该做什么;)。我将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 { terser } from 'rollup-plugin-terser';
const production = !process.env.ROLLUP_WATCH;
const BUILD_PATH = '../server/assets';
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: `${BUILD_PATH}/build/bundle.js`
},
plugins: [
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(`${BUILD_PATH}/build/bundle.css`);
}
}),
// 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(BUILD_PATH),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
}
}
};
}我将我的文件移动为：file organization
然后删除了homepage.ejs /views/pages/中的页面
它起作用了:)！再次感谢您的快速答复
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62453585
复制相关文章
相似问题
腾讯云开发者
