svelte - (!) 插件 slim : No custom element 'tag' option was specified

Question

我尝试将 Svelte 组件编译为 Web 组件。

添加了选项 <svelte:options tag="date-picker" immutable={true}/>

已添加 customElement: true汇总到 plugins: [ svelte()

运行 npm run build

但我不断收到消息:

(!) Plugin svelte: No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. . To hide this warning, use

我究竟做错了什么？

我的 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()
    ]
};

似乎如果您的项目由单个组件组成，则不会出现该消息。请参阅此处的问题:

https://github.com/sil-vio/svelte-web-components/issues/2

Answer 1

您需要嵌套 customElement选择更深一层，像这样

  plugins: [
    svelte({
      compilerOptions: {
        customElement: true,

您可以在 rollup-plugin-svelte 文档中看到这一点:https://github.com/sveltejs/rollup-plugin-svelte#usage