将普通JavaScript加载到Polymer 3元素或照明元素中

问题描述 投票:1回答:1

我正在将Polymer 2应用程序转换为Polymer3。Modulizer对我不起作用,因此我手动对其进行了转换。得益于出色的升级指南,到目前为止,它几乎一直很简单。

尽管只剩下一项任务:在我的Polymer 2应用程序中,我有一个特殊的html导入(d3-import.html),它引入了d3.js库版本3,该版本以纯JavaScript文件的形式提供(没有ES6模块!)。在总共20页中的只有2页中动态加载了此导入,因为其他18页不需要它。

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

任何想法如何做到这一点?

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

编辑:请注意,我目前不使用任何构建步骤/工具,只有Polymer-build可以将模块路径替换为实际文件路径。

polymer lit-element
1个回答
0
投票

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

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

另一个选项是升级到D3 5.x,它似乎是作为标准模块发布的。考虑到所涉及的文件数量,您仍然可能希望使用捆绑程序来减少网络往返次数。

© www.soinside.com 2019 - 2024. All rights reserved.