使用 rollup 将 javascript 导入到 svelte 组件中

Question

在我的代码中，我想导入一个跨多个组件通用的外部 javascript 文件。然而，当 rollup 构建组件时，它无法解析导入的依赖项，因此它永远不会包含在输出包中。请注意，我正在尝试构建一个 svelte 组件（而不是一个 svelte 应用程序），尽管我不确定这有什么不同。这是我的 rollup.config.js:

import svelte from 'rollup-plugin-svelte';
import pkg from './package.json';

const name = pkg.name
    .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '')
    .replace(/^\w/, m => m.toUpperCase())
    .replace(/-\w/g, m => m[1].toUpperCase());

export default {
    input: 'src/Radar.html',
    output: [
        { sourcemap: true, file: pkg.module, 'format': 'es' },
        { sourcemap: true, file: pkg.main, 'format': 'umd', name }
    ],
    plugins: [
        svelte({
            cascade: false,
            store: true
        })
    ]
};

Answer 1

为了解决依赖关系，有一个 plugin for Rollup:

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+)/, '')
    .replace(/^\w/, m => m.toUpperCase())
    .replace(/-\w/g, m => m[1].toUpperCase());

export default {
    input: 'src/Radar.html',
    output: [
        { sourcemap: true, file: pkg.module, 'format': 'es' },
        { sourcemap: true, file: pkg.main, 'format': 'umd', name }
    ],
    plugins: [
        svelte({
            cascade: false,
            store: true
        }),
        resolve()
    ]
};

我假设 Radar.html 是一个 Svelte 模块，即您可以将其重命名为 Radar.svelte。

使用 rollup 将 javascript 导入到 svelte 组件中

Packaging imported javascript into svelte component using rollup

rollupjs

svelte

svelte-component