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

【问题标题】：Bundle only the main component with Svelte仅将主要组件与 Svelte 捆绑在一起
【发布时间】：2019-12-12 11:14:30
【问题描述】：

我想仅将主要组件捆绑在 Svelte 应用程序中，并使用我选择的容器在脚本标记中自行引导应用程序。

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

那就这样吧：

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

我自己在 index.html 中的一个脚本标签

我是 webpack 新手，找不到如何打包然后在 index.html 中调用 App 类

【问题讨论】：

标签： webpack rollup svelte

【解决方案1】：

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

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

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 配置

我终于找到了如何使用 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'
},
...

【讨论】：

感谢您分享您的经验。顺便说一句，如果你在你的 webpack 中使用 babel-ing，你可以export { default } from './src/App.svelte'

【解决方案2】：

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

【讨论】：

你的意思是“customElement”吗？
我明白了，但这并没有解释如何配置 webpack 或 rollup，你能给我看一个配置示例吗？我应该将 app.svelte 设置为入口点吗？如何在 index.html 的脚本标签中获取导出的类？
@2pha 你是对的，我更新了确切的选项名称。 @PortePoisse 如果您使用汇总，您应该有一个名为 svelte 的插件，您可以添加选项。 App.svelte 组件将是您的自定义元素。你可以找到更详细的指南here