聚合物中的模块

Question

在我的react项目中，我已经使用ES6模块一段时间了。在我的react组件中，我会使用import:

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

在我的聚合物组件中，我使用一个脚本标签:

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

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

问题1:我的理解对吗?

问题2:有没有办法在聚合物中得到类似的东西?

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

Answer 1

当然可以将ES6模块与Polymer一起使用。首先要做的是拆分模板和脚本。你可以在两个方向

1. 在元素的html:

   中添加一个包含ES6代码的script标签

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

2. 使用某种插件从ES6代码中导入HTML。例如，使用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一个尝试，请看看我的博客上的博客文章。我使用的是TypeScript，但对于ES6，一般解决方案应该大致相同