将导入语句转换为Web路径

Question

我目前正在尝试使用Web组件。为此，我安装了一个带有npm的软件包，该软件包使用lit-element（聚合物）将引导程序引入Web组件。

您应该始终只包括所需的组件：

// e.g import only bs-alert
import 'lit-element-bootstrap/components/alert/bs-alert';

// e.g import all alert components
import 'lit-element-bootstrap/components/alert';

// e.g import all components (should be avoided)
import 'lit-element-bootstrap';

我现在的问题是：如何直接在Web浏览器中使用这些import语句？因此，导入语句必须转换为真实的Web路径。因此，我需要一个能够处理所有这些依赖关系并将其导入语句重写为Web路径的工具。

我找到了一个可以做到这一点的工具，但是它可以构建“ lit-element-bootstrap”的所有内容，最后我得到一个500+ KB的文件： https://github.com/pikapkg/web

Answer 1

从长远来看，应该通过import maps解决此问题。基本上，这将使浏览器知道import 'lit-element-bootstrap/实际上是import 'path/to/lit-element-bootstrap/的意思。

现在，您将需要一台自动更改路径的服务器（例如polymer serve或owc-dev-server，或者需要应用build step。