Question

我只希望将Svelte应用程序中的主要组件捆绑在一起，并使用自己选择的容器将其自身引导到script标签中。

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

那么：

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

我自己位于index.html中的脚本标记中

我是webpack的新手，无法找到如何捆绑然后在index.html中调用App类的方法。

Answer 1

我终于找到了我想要的使用汇总的sveltejs / template start项目。

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

import App from './App.svelte';

export default App;

汇总构建会将main.js的默认导出存储在一个变量中，该变量在rollup.config文件（输出-> name）中命名，默认情况下为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>

我删除了捆绑脚本标签的defer属性，以确保它之前已运行。

编辑-WEBPACK配置

我终于找到了如何使用webpack的方法，必须将输出设置为库，并且导出必须是默认值（或者您必须实例化新的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'
},
...

Answer 2

如果您检查Svelte的compile options，您会发现 customElement 是编译为Web组件的选项。这就是您要寻找的，以及标记选项。

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

2 个答案: