Question

我尝试将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()
    ]
};

似乎，如果您的项目由单个组件组成，则不会出现该消息。在此处查看问题：

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

Answer 1

您必须在rollup-plugins-svelte部分中另外添加tag: null。

...
         { file: pkg.main, 'format': 'umd', name }
        ],
        plugins: [
            svelte({
                customElement: true,
                tag: null
            }),
            resolve()
        ]
    };

如果您正在寻找一个可行的例子： https://github.com/ivosdc/svelte-generic-crud-table/blob/master/rollup.config.js

Answer 2

您需要像这样将 customElement 选项嵌套更深一层

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

（！）插件苗条：未指定自定义元素“标签”选项

2 个答案: