要在子文件夹中提供Svelte应用程序,而不使用Sapper,您可以按照以下步骤进行操作:
npx degit sveltejs/template svelte-app
cd svelte-app
npm install
npm run dev
sub-app
的文件夹。mkdir sub-app
index.html
文件,并将以下内容复制到文件中。这将提供用于呈现子应用程序的容器。
Sub App
main.js
文件,并将以下内容复制到文件中。这将用于加载和启动子应用程序。import App from './App.svelte';
const app = new App({
target: document.getElementById('sub-app')
});
export default app;
在子应用程序文件夹中创建一个新的App.svelte
文件,并将您的子应用程序的Svelte组件代码复制到文件中。
在主应用程序的根目录中创建一个新的index.html
文件,并将以下内容复制到文件中。这将提供用于呈现主应用程序的容器。
Main App
Main App
main.js
文件,并将以下内容复制到文件中。这将用于加载和启动主应用程序。import App from './App.svelte';
const app = new App({
target: document.getElementById('main-app')
});
export default app;
rollup.config.js
文件,并将以下内容复制到文件中。这将配置Rollup以构建主应用程序和子应用程序的捆绑包。import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default [
{
input: 'main.js',
output: {
file: 'bundle.js',
format: 'iife',
sourcemap: true
},
plugins: [
svelte(),
resolve(),
commonjs()
]
},
{
input: 'sub-app/main.js',
output: {
file: 'sub-app/bundle.js',
format: 'iife',
sourcemap: true
},
plugins: [
svelte(),
resolve(),
commonjs()
]
}
];
npm run build
npm run dev
现在