仅将主要组件与 Svelte 捆绑

Question

仅将主要组件与 Svelte 捆绑

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

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

这样做：

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

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

Por*_*sse 5

我终于通过使用汇总的 sveltejs/template 启动项目找到了我想要的东西。

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

import App from './App.svelte';

export default App;

Run Code Online (Sandbox Code Playgroud)

汇总构建会将 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>

Run Code Online (Sandbox Code Playgroud)

我删除了 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'
},
...

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，1 月前
查看次数：	1079 次
最近记录：	6 年，1 月前