个人中心
gpt4 book ai didi

javascript - 在 Svelte 中导入 Stencil

转载 作者：行者123 更新时间：2023-12-02 22:00:46 24 4
gpt4 key购买 nike

我有一个 Monorepo，其中有一个 svelte 项目和一个 Stencil 组件库。关于Stencil website他们非常清楚地描述了如何将该库与 Angular 等集成

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

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

当我尝试执行与上述类似的操作时，我遇到了严重错误

enter image description here

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

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

更新:添加了 emitCss ，它提供了

enter image description here

最后的某个地方有统计信息:错误:意外的 token (请注意，您需要插件来导入非 JavaScript 的文件)

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

enter image description here

最佳答案

我创建了一个新项目，并且成功重现了同样的问题。

起初，我认为与 typescript 有关，并且我在汇总中尝试了一堆插件，例如:@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
                });
            }
        }
    };
}

注意:我从另一个 svelte 项目中获取了配置(您可以忽略无趣的插件)

现在似乎工作正常，但我认为这只是一个起点:)因为我遇到了一些关于模板本身的已知问题；

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

这不是完全有效的解决方案，但我认为它可以帮助您完成后续步骤......

关于javascript - 在 Svelte 中导入 Stencil，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59887533/

24 4 0
文章推荐： javascript - 如果要从中减去一个数字，为​​什么必须在每次提示消息后再次声明一个变量？ JavaScript
文章推荐： c# - 用于设置不同修饰符以获取/设置的一行
文章推荐： javascript - 如何从字符串中删除重复的行？
文章推荐： javascript - 如何在页面加载时运行函数，然后在单击后运行函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com