如何组织/捆绑Express应用程序+ Web组件应用程序文件

编程问答 2022-06-05

问题描述

我正在尝试使用webcomponents（lit-element）创建一个小应用程序并表达js。

我从open-wc starter app开始，对文件结构进行了少许更改，所以现在看起来像这样：

 - dist                 (created during the build with rollup)
    - 1234567.js        (chunk containing all js for the different components)
    - index.html
 - node_modules
 - src
    - components
        - component-a
        - component-b
 - index.html
 - package.json
 - rollup.config.js
 - ...

我遗漏了一些我认为不必要的文件，例如许可证，整理和测试配置...

现在，我想使用Express App作为我的服务器。 为此，我在项目的根目录下创建了一个server文件夹和一个server.js文件。

我现在的问题是，我想创建几个不同的视图，例如登录视图和主视图，然后在其中使用我的Web组件。

问题是我的组件被捆绑到dist文件夹中，并且js文件获得了“随机”名称（在我的示例中为1234567.js），因此我不确定如何导入/使用它们在我看来。

我正在使用open-wc项目中的默认rollup.config.js 

import merge from 'deepmerge';
import { createSpaConfig } from '@open-wc/building-rollup';

const baseConfig = createSpaConfig({
  developmentMode: process.env.ROLLUP_WATCH === 'true',injectServiceWorker: false,});

export default merge(baseConfig,{
  input: './index.html',});

什么是最好的方法？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bundlebundleexpressjavascriptlit-elementrollupjs