Question

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

想法是要有一个像这样的文件夹结构

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

这应该由汇总“循环”并创建一组JS文件

publish
    component-1.js
    component-2.js

每个苗条的组件都是独立的/自治的，我也可能会使用其他技术来创建其他组件。（React / Vanilla.js / lit.hmtl / stencil）

我正在Visual Studio中工作，执行这些操作的示例非常稀疏。有人能将我引向一个好示例吗？

Answer 1

对于您要尝试做的事，我没有最新的例子，但是做类似的事情似乎是值得尝试的一种方法：

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

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' 
  }),
];

因为这需要您为每个组件划一线，所以您可以更进一步，并使用诸如.svelte之类的东西来获取所有glob文件，并使用{{1}映射结果}给出了最终代码：

toRollupConfig

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

1 个答案: