将选定的Svelte组件编译为CustomElements
我正在尝试使用Svelte构建一个前端应用程序。我有许多应该编译为自定义元素的组件，以便可以动态地插入它们，例如：
<script>
let my_html_string = '<p>Hello from <my-customelem/> something something</p>';
</script>
<div>
{@html my_html_string}
</div>只要我在我的customElement: true文件中设置全局rollup.config.js，它就能正常工作。
但是，这使我停止使用例如svelte-router，因为它显然不会编译为自定义元素。
是否有一种方法可以将汇总配置为有选择地将某些元素编译为自定义元素，同时将基本应用程序(App.svelte、Svelte路由器Router、Link等组件)保留为标准Svelte组件？
更新(更多信息)：
上面的组件是(例如) Page.svelte。CustomElement.svelte是应该作为自定义元素编译的组件。
我是按照说明使用svelte (https://github.com/EmilTholin/svelte-routing)的(没什么特别的)。
我的rollup.config是默认的Svelte模板版本(设置了customElement: true )。
当我使用customElement: true编译时，我会得到一个“非法构造器”错误(由于Router组件的扩展路由)；当我删除customElement: true时，显然不会将CustomElement编译成一个自定义元素(因此不能从HTML动态插入它)。
那么，是否有一种方法可以选择性地为自定义元素打开customElement: true？
回答 1
Stack Overflow用户
发布于 2022-03-01 14:40:12
看看这个例子。
我的StackOverflow问题也包含这样的例子。下面的rollup配置允许您使用不同的文件扩展名来处理这两种组件类型：*.svelte用于Svelte组件，*.wc.svelte用于HTML5自定义元素。
plugins: [
...
/** Handle HTML5 Web Components **/
svelte({
include: /\.wc\.svelte$/,
preprocess: sveltePreprocess({
sourceMap: !production,
}),
compilerOptions: {
customElement: true,
// enable run-time checks when not in production
dev: !production
},
// store CSS in JavaScript
emitCss: false
}),
/** Handle Svelte Components **/
svelte({
exclude: /\.wc\.svelte$/,
preprocess: sveltePreprocess({
sourceMap: !production,
}),
compilerOptions: {
customElement: false,
// enable run-time checks when not in production
dev: !production
},
// we'll extract any component CSS out into
// a separate file - better for performance
emitCss: true
}),
...我唯一的问题是，它记录自定义元素的警告。
https://stackoverflow.com/questions/57287005
复制相似问题
腾讯云开发者
