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

Posted 2023-03-07

【中文标题】Svelte：在汇总中将组件构建到 AMD 模块中

【英文标题】：Svelte : build component into AMD module in rollup

【发布时间】：2022-01-24 04:16:05

【问题描述】：

<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 模块中而不在代码中列出它们吗？

【参考方案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.

【讨论】：

这是这里的问题，路径./Widget1.svelte实际上只在开发过程中存在。当项目发布时，它被构建到一个 AMD js 文件中。 1. 如何指示汇总将小部件构建到 AMD 模块中而不列出它们？ 2.如何知道输出文件名（目前为Widget1_<random>.js），以便使用requirejs加载？

所以，为了确保我理解您的目标，您希望将一组 Widget<xyz>.svelte 组件构建到它们相应的 Widget<xyz>.js AMD 模块中，而不必列出源代码本身中的所有组件，对吗？

是的，没错！我仍然在汇总中尝试不同的配置来实现这一点

@Mr.WangfromNextDoor 提出了一个可能的汇总配置，构建没有错误，但我无法实际测试构建的模块。查看更新的答案，希望它对您有用。