在 Polymer 3 元素或 lit-elements 中加载普通 JavaScript



我正在将聚合物 2 应用程序转换为聚合物 3。模块化器对我不起作用,所以我手动转换了它。多亏了出色的升级指南,到目前为止,它基本上是直截了当的。

不过还剩下一个任务: 在我的 Polymer 2 应用程序中,我有一个特殊的 html 导入 (d3-import.html(,它引入了 d3.js lib 版本 3,它以纯 JavaScript 文件的形式出现(没有 ES6 模块!此导入仅在总共 20 个页面中的两个页面中动态加载,因为其他 18 个页面不需要它。

在聚合物 3 中,我无法将其作为 ES6 模块导入,因为它不是模块。在我的主启动中加载它.html意味着即使用户只使用其他 18 个不需要它的页面,它也会被加载。 我尝试在我的 Web 组件模板中编写脚本标签,但这似乎不起作用。不幸的是,我在浏览器工具中没有看到任何错误。模板只是停止加载脚本标记的行。

知道怎么做吗?

附加问题: 因为我开始在同一应用程序中使用 lit-element。如何用光元件解决同样的问题?

编辑:请注意,除了聚合物构建之外,我目前不使用任何构建步骤/工具将模块路径替换为实际文件路径。

请注意,此挑战与 Polymer 或 LitElement 无关,这只是如何从模块加载非模块资源的问题。

我知道的最直接的方法是使用像Rollup这样可以支持CommonJS或UMD的捆绑器。Rollup为此提供了commonjs插件:https://github.com/rollup/plugins/tree/master/packages/commonjs

另一种选择是升级到 D3 5.x,它本身似乎作为标准模块发布。考虑到涉及的文件数量,您仍然可能需要一个捆绑器来减少网络往返。

最新更新