仅将主要组件与 Svelte 捆绑在一起

Question

我想仅将主要组件捆绑在 Svelte 应用程序中，bootstrap 应用程序本身与我选择的容器一起捆绑在脚本标签中。

在 Svelte 模板（汇总和 bootstrap）中，应用程序是 main.js 中的 bootstrap，它导入 App.svelte。我只想捆绑 App.svelte 并自己实例化 App class。 objective 是为了能够在我想要的任何平台中重复使用该应用程序并能够选择目标（例如：在 CMS、SharePoint 等中使用组件）。

也一样 :

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

我自己在 index.html

中的脚本标记中

我是 webpack 的新手，我找不到如何打包然后在 index.html

中调用 App class

Answer 1

如果您检查 Svelte 的 compile options，您会注意到有一个选项可以编译为 Web 组件，customElement。这就是您要查找的内容，以及标签选项。

Answer 2

我终于在 sveltejs/template 启动项目中找到了我想要的东西，它使用汇总。

在 main.js 中，删除 App class 的实例化并导出 class。

import App from './App.svelte';

export default App;

汇总构建会将 main.js 的默认导出存储在一个变量中，在 rollup.config 文件中命名（输出 -> 名称），默认为 app。

编辑index.html，替换正文中的脚本，然后添加脚本标签：

<body>
    <div id="app-container"></div>
    <script src='/bundle.js'></script>
    <script>
        var myapp= new app({
            "target": document.getElementById("app-container"),
            "props": {
                "name": 'world'
            }
        })
    </script>
</body>

我删除了 bundle script 标签的 defer 属性，以确保它之前是运行。

编辑 - 网络包配置

我终于找到了如何使用 webpack，输出必须设置为库并且导出必须是默认的（或者你必须用 new app.default({...}) 实例化）

从 svelte 模板编辑的 webpack 配置：

entry: './src/App.svelte',
resolve: {
    alias: {
        svelte: path.resolve('node_modules', 'svelte')
    },
    extensions: ['.mjs', '.js', '.svelte'],
    mainFields: ['svelte', 'browser', 'module', 'main']
},
output: {
    path: __dirname + '/public',
    filename: 'bundle.js',
    chunkFilename: 'bundle.[id].js',
    library: 'app',
    libraryExport: 'default',
    libraryTarget: 'var'
},
...

仅将主要组件与 Svelte 捆绑在一起

Bundle only the main component with Svelte

rollup

webpack

svelte