我正在尝试使用 Svelte 构建前端应用程序。我有许多组件应编译为自定义元素,以便我可以动态插入它们,即通过执行以下操作:
<script>
let my_html_string = '<p>Hello from <my-customelem/> something something</p>';
</script>
<div>
{@html my_html_string}
</div>
只要我在我的 rollup.config.js 文件中设置全局 customElement: true
就可以正常工作。
但是,这阻止了我使用例如svelte-router
,因为它显然不会编译成自定义元素。
有没有一种方法可以配置 rollup 以选择性地将某些元素编译为自定义元素,同时保留基本应用程序(App.svelte
、svelte-router Router
、Link
等组件)作为标准 Svelte 组件?
更新(更多信息):
上面的组件是(例如)Page.svelte
。 CustomElement.svelte
是应该编译为自定义元素的组件。
我正在根据说明使用 svelte-routing ( https://github.com/EmilTholin/svelte-routing )(没什么特别的)。
我的 rollup.config 是默认的 Svelte 模板版本(设置了 customElement: true
)。
当我使用 customElement: true
进行编译时,出现“非法构造函数”错误(由于 svelte-routing Router
组件);当我删除 customElement: true
时,我显然没有将 CustomElement
编译为自定义元素(因此无法从 HTML 字符串动态插入它)。
那么,有没有一种方法可以选择性地为自定义元素启用 customElement: true
?
最佳答案
查看 this example .
还有 my StackOverflow question包含这样的例子。以下汇总配置允许您通过使用不同的文件扩展名来处理两种组件类型:*.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/
相关文章:
asp.net-core-2.0 - 如何在 .net 核心 web api 中将 Razor Vi
firebase - oobCodes 在 Firebase 中的生命周期
spring-boot - Spring Boot - Rest Controller 响应两个 J
asp.net-mvc - 具有 ASP.NET MVC 属性路由的 Controller 级参数
django - 自定义 Django Admin 用户密码修改表单
spring - 让 Spring RestTemplate 使用内存中的 pem 证书(不在磁盘上
javascript - 在 Angular 2+ 上重新渲染 FullCalendar