Упаковка импортированного javascript в компактный компонент с помощью rollup

В моем коде я хочу импортировать внешний файл javascript, общий для нескольких компонентов. Однако, когда объединительный пакет создает компонент, у него возникают проблемы с разрешением импортированной зависимости, поэтому он никогда не включается в выходной пакет. Обратите внимание: я пытаюсь создать компактный компонент (в отличие от простого приложения), хотя я не уверен, что это имеет значение. Вот мой rollup.config.js:

import svelte from 'rollup-plugin-svelte';
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/Radar.html',
    output: [
        { sourcemap: true, file: pkg.module, 'format': 'es' },
        { sourcemap: true, file: pkg.main, 'format': 'umd', name }
    ],
    plugins: [
        svelte({
            cascade: false,
            store: true
        })
    ]
};

6
1 012
1

Ответ:

Решено

Для разрешения зависимости существует плагин для 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+)/, '$3')
    .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.