svelte - (!)插件苗条:未指定自定义元素“标签”选项
问题描述
我尝试将 Svelte 组件编译为 Web 组件。
- 添加了选项
<svelte:options tag="date-picker" immutable={true}/>
customElement: true
在汇总中添加到plugins: [ svelte()
- 跑
npm run build
但我不断收到消息:
(!)插件苗条:未指定自定义元素“标签”选项。要自动注册自定义元素,请指定带有连字符的名称,例如 . 要隐藏此警告,请使用
我究竟做错了什么?
我的index.js
文件:
export { default as default } from './DatePicker.svelte';
DatePicker.svelte
文件:
<svelte:options tag="date-picker" immutable={true}/>
<script>
/* code */
汇总文件:
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import pkg from './package.json';
const name = pkg.name
.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
.replace(/^\w/, m => m.toUpperCase())
.replace(/-\w/g, m => m[1].toUpperCase());
export default {
input: 'src/index.js',
output: [
{ file: pkg.module, 'format': 'es' },
{ file: pkg.main, 'format': 'umd', name }
],
plugins: [
svelte({
customElement: true
}),
resolve()
]
};
似乎如果您的项目由单个组件组成,则不会出现该消息。在此处查看问题:
解决方案
您需要将customElement
选项嵌套更深一步,如下所示
plugins: [
svelte({
compilerOptions: {
customElement: true,
您可以在 rollup-plugin-svelte 文档中看到这一点:https ://github.com/sveltejs/rollup-plugin-svelte#usage
推荐阅读
- mysql - SQL - 连接 2 个表并返回 2 行之间的值差异
- mysql - 连接我创建的数据库有困难(但对于已经在这里的数据库来说还可以)
- handlebars.js - 在 handlerbar 中,错误提示“如果每个都不匹配”
- laravel - laravel 获取模型 vuejs 数据 false
- c++ - 即将超出范围的变量是左值还是 xvalue?
- java - Primefaces数据表渲染抛出错误表'var'和列'field'属性必须为非空
- python - 如何使用python别名模块名导入子模块?
- html - 如何阻止 html 压缩内容?
- python - 如何检查脚本是在本地运行还是在 azure devops 上运行
- javascript - 如何在 d3.js 中检查数据是否分层