javascript - 在Svelte中导入模具

我有一个带有一个苗条项目和一个Stencil组件库的Monorepo。在Stencil website上，它们非常清楚地描述了如何将库与Angular集成在一起。

import { defineCustomElements } from 'test-components/loader';
defineCustomElements(window);

超级容易。但是现在我也想在Svelte项目中使用它.....不再那么简单了:(

当我尝试执行上述类似操作时，出现严重错误

fbp/dist是模具文件所在的位置。

当我首先构建我的Stencil项目并将dist复制到public文件夹中，并在./dist/fbp.js的头部加载index.html时，一切正常。但是，如果我可以像在Angular中一样包含它，将会容易得多。有什么建议么？

更新：添加了emitCss

最后统计：Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

更新：通过@Sambor的修复，Svelte现在可以下载Web组件，不幸的是失败了

最佳答案

我创建了一个新项目，并设法重现了同样的问题。

起初，我以为与打字稿有关，我曾尝试过像@tscc/rollup-plugin-tscc, rollup-plugin-typescript这样的汇总插件，但没有用。

我也尝试了rollup-plugin-amd获得相同的结果...

然后，我尝试更改主输出格式，并使用es代替iife。
这样，还需要将输出更改为目录而不是文件（由于生成了多个文件）。
令人惊讶的是，这种方式似乎有效。

这是我的代码：

/// index.html

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>
    <title>Test</title>
    <link rel='stylesheet' href='build/bundle.css'>
    <script type="module" defer src='build/main.js'></script>
</head>

<body>
</body>

</html>

注意：main.js作为模块导入。

/// main.js

import App from './App.svelte';

import { applyPolyfills, defineCustomElements } from '../my-comp/loader';

applyPolyfills().then(() => {
  defineCustomElements(window);
});

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

export default app;

/// rollup.config

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import autoPreprocess from 'svelte-preprocess';
import json from '@rollup/plugin-json';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'es',
        name: 'app',
        dir: 'public/build'
    },
    plugins: [
        json(),
        svelte({
            // Enables run-time checks when not in production.
            dev: !production,

            // Extracts any component CSS out into a separate file — better for performance.
            css: css => css.write('public/build/bundle.css'),

            // Emit CSS as "files" for other plugins to process
            emitCss: true,

            preprocess: autoPreprocess()
        }),

        resolve({
            browser: true,
            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
        }),
        commonjs(),

        postcss({
            extract: true,
            minimize: true,
            use: [
                ['sass', {
                    includePaths: ['./node_modules']
                }]
            ]
        }),

        // In dev mode, call `npm run start` once the bundle has been generated
        !production && serve(),

        // Watches the `public` directory and refresh the browser on changes when not in production.
        !production && livereload('public'),

        // Minify for production.
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

注意：我从另一个精简项目中获取了配置（您可以忽略不感兴趣的插件）

现在它似乎运行良好，但是我认为这只是一个起点：）因为我遇到了模板本身存在的一些已知问题；

core-3d1820a5.js:97 TypeError: Failed to fetch dynamically imported module: http://localhost:57231/build/my-component.entry.js
core-3d1820a5.js:863 Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined

https://github.com/sveltejs/sapper/issues/464

https://github.com/ionic-team/stencil/issues/1981

与react相同：Unable to integrate stenciljs component in React application

这不是完全可行的解决方案，但我认为它可以为您的后续步骤提供帮助。