Svelte：在汇总中将组件构建到 AMD 模块中

Question

<script lang="ts">
    export let name; // widget name
    let childComponent;

    import { onMount } from 'svelte';
    onMount(() => {
        switch(name) {
            case 'Widget1':
                import('./Widget1.svelte')
                    .then(res => childComponent = res.default)
                    .catch(err=> { throw "Cannot load component `" + name+ '` ' +  err.message; });
                break;

            case 'Widget2':
                import('./Widget2.svelte')
                    .then(res => childComponent = res.default)
                    .catch(err=> { throw "Cannot load component `" + name + '` ' +  err.message; });
                break;

            // more cases ...

            default:
                throw "Unknown component `" + name + '` ';
        }
            
    });

</script>

<svelte:component this={childComponent}>
        
</svelte:component>

除了长 cases.

之外，上面的代码运行良好

我的 Svelte 项目通过 rollup 打包到 AMD 中。例如。 Widget1.svelte 内置于延迟加载的 Widget1-69d8780f.js 中。

汇总可以将我的小部件构建到单独的 AMD 模块中，而无需在代码中列出它们吗？

Answer 1

不确定这是否是您要查找的内容，但查看您的代码，我认为不需要 switch 语句？你可以简单地做：

..
    onMount(() => {
        import(path)
            .then(res => childComponent = res.default)
            .catch(err=> { throw "Cannot load component `" + path + '` ' +  err.message; });
    });
..

唯一缺少的是默认语句，但我假设如果您尝试加载不存在的路径，导入会抛出错误？

除非您明确列出所有组件以便 Rollup 拾取它们，在这种情况下我看不到解决方法。

更新：可能的 Rollup 配置

考虑到您的既定目标，我尝试了 Rollup 配置选项：

遍历 Svelte 组件的集合（为了简单起见，我假设它们都在一个目录中，但这可以扩展）
对于每个组件，输出一个相应的同名 AMD 模块，没有额外的块信息（这实际上是当你有一个入口点数组时的默认行为）

import svelte from 'rollup-plugin-svelte'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'

import { readdirSync } from 'fs'

export default {
  input: readdirSync('src/widgets').map((s) => `src/widgets/${s}`),
  output: {
    dir: 'build',
    format: 'amd',
  },
  plugins: [svelte(), resolve(), commonjs()],
}

svelte 插件在这里显然是强制性的，我已经包含了 resolve 和 commonjs 用于最终的外部依赖（我相信 resolve 插件是还需要将 svelte 添加为依赖项）。

在构建一个示例项目时，构建目录会填充相应的输出模块（每个组件一个），加上一个 index-<chunk>.js 模块，我相信它包含 Svelte 依赖项（即所有 Svelte 助手组件模块中使用的方法）。

但是我无法正确测试输出（我对 AMD 的了解非常有限，而且我从未使用过 requirejs）。 Here is a gist of the components + the rollup config above.

Svelte：在汇总中将组件构建到 AMD 模块中

Svelte : build component into AMD module in rollup

svelte

rollupjs

svelte-3

svelte-component

更新：可能的 Rollup 配置