未捕获的错误：“目标”是必需选项 - Svelte

Question

我正在为 Svelte 构建一个 NPM 包。通过这个包，我导出了几个简单的组件：

import SLink from './SLink.svelte';
import SView from './SView.svelte';

export { SLink, SView };

这是在使用汇总将它们捆绑到缩小版本之前。

汇总配置：

module.exports = {
    input: 'src/router/index.ts',
    output: {
        file: pkg.main,
        format: 'umd',
        name: 'Router',
        sourcemap: true,
    },
    plugins: [
        svelte({
            format: 'umd',
            preprocess: sveltePreprocess(),
        }),
        resolve(),
        typescript(),
        terser(),
    ],
};

package.json（减去不必要的信息）：

{
    "name": "svelte-dk-router",
    "version": "0.1.29",
    "main": "dist/router.umd.min.js",
    "scripts": {
        "lib": "rollup -c lib.config.js",
    },
    "peerDependencies": {
        "svelte": "^3.0.0"
    },
    "files": [
        "dist/router.umd.min.js"
    ],
}

当我发布包并测试它时，出现以下错误：

Uncaught Error: 'target' is a required option
    at new SvelteComponentDev (index.mjs:1642)
    at new Home (App.svelte:5)
    at Z (router.umd.min.js:1)
    at N (router.umd.min.js:1)
    at new t.SView (router.umd.min.js:1)
    at create_fragment (App.svelte:5)
    at init (index.mjs:1476)
    at new App (App.svelte:5)
    at main.js:7
    at main.js:9

target这似乎与安装用于安装的组件有关：

const app = new App({ target: document.body })

---

奇怪的是，SLink它本身工作正常，按应有的方式安装等，只是SView不起作用。

SLink:

<script lang="ts">
    import { writableRoute, changeRoute } from '../logic';

    export let name: string = undefined,
        path: string = undefined,
        query: Record<string, string> = undefined,
        params: Record<string, string> = undefined;

    let routerActive: boolean;

    writableRoute.subscribe(newRoute => {
        if (newRoute.path === '*') return;
        const matches = (path && path.match(newRoute.regex)) || newRoute.name === name;
        routerActive = matches ? true : false;
    });
</script>

<div
    on:click={() => changeRoute({ name, path, query, params })}
    class={routerActive ? 'router-active' : ''}>
    <slot />
</div>

SView:

<script lang="ts">
    import { writableRoute } from '../logic';

    let component: any;

    writableRoute.subscribe(newRoute => (component = newRoute ? newRoute.component : null));
</script>

<svelte:component this={component} />

---

我按照这些文档尝试了未编译的组件，但导入不起作用。

有人知道我该如何解决这个问题吗？

Answer 1

我最近遇到了这个问题。我正在设置一个新页面，忘记了defer上的关键字script。我有：

<script src="/app/public/build/bundle.js"></script>

它需要是

<script defer src="/app/public/build/bundle.js"></script>

注意缺少的defer.

Answer 2

Svelte 树中的所有组件都需要使用相同的 Svelte 编译器（即 same node_modules/svelte）同时进行编译。这包括来自外部库的组件，就像您想要实现的那样。这是您链接的文档中解释的内容。

main的字段将package.json公开已编译的组件，以供在非 Svelte 应用程序中使用。

您还需要一个svelte字段来公开组件的未编译版本，以供 Svelte 应用程序使用。您仍然可以从文件中导出多个 Svelte 组件.js。

package.json

{
    "name": "svelte-dk-router",
    "version": "0.1.29",
    "main": "dist/router.umd.min.js",

    "svelte": "src/index.js",

    "scripts": {
        "lib": "rollup -c lib.config.js",
    },
    "peerDependencies": {
        "svelte": "^3.0.0"
    },
    "files": [
        "dist/router.umd.min.js"
    ],
}

src/index.js

import SLink from './SLink.svelte';
import SView from './SView.svelte';

export { SLink, SView };

rollup-plugin-svelte将选取svelte您的 lib 中的字段package.json，以便正确解析 Svelte 组件的导入。