импорт трафарет в строй - PullRequest
Новая
       82

импорт трафарет в строй

0 голосов
/ 24 января 2020

У меня есть Monorepo с проектом svelte и библиотекой компонентов Stencil. На веб-сайте Stencil они очень четко описывают, как интегрировать библиотеку, например, с Angular 

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

Super easy. Но теперь я хотел бы использовать это тоже в проекте Svelte ..... уже не так просто: (

Когда я пытаюсь сделать что-то подобное, как описано выше, я получаю серьезные ошибки

enter image description here

fbp/dist - это место, где находятся файлы трафарета.

Когда я сначала строю свой проект трафарета и копирую мой dist в папку public и загрузить ./dist/fbp.js в начало index.html все это работает. Но было бы намного проще, если бы я мог включить его аналогично тому, как это делается с Angular. Есть предложения?

Обновление: добавлено emitCss который дает

enter image description here

Где-то в конце это статистика: Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

ОБНОВЛЕНИЕ: С исправлениями @Sambor, Svelte теперь может загрузить веб-компонент, который, к сожалению, не работает

enter image description here

Ответы [ 2 ]

1 голос
/ 25 января 2020

Я создал новый проект, и мне удается воспроизвести ту же проблему.

Сначала я подумал, что это связано с машинописью, и я попробовал кучу плагинов в свертке, например: @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

то же самое с реакцией: Невозможно интегрировать трафарет js компонент в приложении React

Это не полностью рабочее решение, но я подумал, что оно может помочь вам в следующих шагах ...

0 голосов
/ 11 февраля 2020

У меня все та же проблема в 2020 году. Удивительно, но шаблон веб-пакета работает нормально. Переходя к этому на данный момент, пока это не решено.

https://github.com/sveltejs/template-webpack

...