polymer - polymer 中的模块

Question

在我的 React 项目中，我使用 ES6 模块已有一段时间了。在我的 React 组件中，我将使用 import:

import {f1,f2} from "./myLib";

在我的 polymer 组件中，我使用脚本标签:

<script src="./myLib.js"></script>

如果我没记错的话，它们在做两件完全不同的事情。脚本标签正在污染我的整个应用程序的全局命名空间。导入不是。

问题 #1:我对此的理解是否正确？

问题 #2:有没有办法在 polymer 中得到类似的东西？

我有几十种不同的 polymer 成分。一些导入冲突的库。然后，如果我有一个使用多个组件的页面，那么我将获得哪个版本的 JS 脚本似乎是一个废话。

Answer 1

当然可以将 ES6 模块与 Polymer 一起使用。您要做的第一件事是拆分模板和脚本。然后你可以双向走

1. 在元素的 html 中添加包含转译 ES6 代码的脚本标签:

   <dom-module id="my-elem"></dom-module>
   <script src="my-elem.js"></script>
   

2. 使用某种插件从 ES6 代码导入 HTML。例如，这可以用 plugin 实现对于 SystemJS

   import './my-elem.html!';
   
   class MyElem extends HTMLElement {}
   
   document.registerElement('my-elem', MyElem);
   

那么困难的部分就是转译。我不确定其他模块加载器，但使用 JSPM+SystemJS 很容易将其捆绑为通用模块。这样你的元素将同时被 <link rel="import" href="bower_components/my-elem/my-elem.html"> 使用以及从其他 ES6 代码导入。在前一种情况下，任何未捆绑的依赖项都必须存在于全局范围内。但是，您可以将任何此类依赖项放在主 html 文件中。就像发布许多其他元素一样。

如果您愿意尝试 JSPM+SystemJS，请查看 blog post on my blog .我使用的是 TypeScript，但对于 ES6，一般解决方案应该大致相同。