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 提取它们，在这种情况下，我看不到解决办法。

更新：可能的汇总配置

考虑到您的既定目标，我已经使用了汇总配置选项：

• 遍历 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 依赖项（即，在组件模块）。

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