Я создал новый проект, и мне удалось воспроизвести ту же проблему.
Сначала я подумал, что это связано с машинописным текстом, и я пробовал кучу плагинов в свертке, например: @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
то же самое с реакцией: Невозможно интегрировать компонент stenciljs в приложение React
Это не полностью рабочее решение, но я подумал, что оно может помочь вам в следующих шагах ...
person
V. Sambor
schedule
25.01.2020
rollup -c -wвсе настройки по умолчанию / из коробки. Если хотите, можете найти репозиторий здесь - person Jeanluca Scaljeri schedule 24.01.2020emitCss: true,после строки 25 в конфигурации накопительного пакета? - person V. Sambor schedule 25.01.2020Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)- person Jeanluca Scaljeri schedule 25.01.2020