在 Visual Studio 中使用 Svelte 和 Rollup 创建多个自定义元素

Question

我正在尝试在一个项目中使用 Svelte 和 Rollup 创建多个网络自定义元素。

我们的想法是拥有这样的文件夹结构

web-components
    component-1
        index.svelte
    component-2
        index.svelte

这应该是 "looped" 由 Rollup 并创建一组 JS 文件

publish
    component-1.js
    component-2.js

每个精巧的组件都是 standalone/autonomous，我也可能会使用其他技术创建其他组件。 (React/Vanilla.js/lit.hmtl/stencil)

我在 Visual Studio 工作，做这些事情的例子很少。任何人都可以指导我提供一个好的例子吗？

Answer 1

我没有关于你正在尝试做的事情的当前示例，但是做了类似的事情这似乎是一种值得尝试的方法：

您的 rollup.config.js 文件可以 return 数组而不是单个对象：

export default [
 { configuration for component 1 },
 { configuration for component 2 }
];

由于每个配置都会有一些重复（插件、格式等），因此最好将它们抽象出来：

const toRollupConfig = ({ src, dest }) = {
  /// Rollup Configuration
};

export default [
  toRollupConfig({ 
    src: './web-components/component-1/index.svelte', 
    dest: './publish/component-1.js' 
  }),
  toRollupConfig({ 
    src: './web-components/component-2/index.svelte', 
    dest: './publish/component-2.js' 
  }),
];

因为这需要你为每个组件制作一行，你可以更进一步，使用 glob 或类似的东西获取所有 .svelte 文件，并将结果映射到 toRollupConfig 给你最终代码：

const GetComponents = (srcDir, destDir) => {
  // Get the files and return for each an object of the form { src, dest }
};

const toRollupConfig = ({ src, dest }) = {
  /// Rollup Configuration
};

export default GetComponents('./web-components/','./publish').map(toRollupConfig);

在 Visual Studio 中使用 Svelte 和 Rollup 创建多个自定义元素

Create multiple custom-elements with Svelte and Rollup in Visual Studio

visual-studio

rollupjs

svelte