是否可以将模块导入聚合物组件？

Question

我想保留我的聚合物组件很好地封装，但现在如果我尝试将任何外部模块导入到组件中，我会得到一个未定义的“导入”错误。

我使用Webpack捆绑我的应用程序，但这只打包了我的JavaScript文件。

有没有办法让我的聚合物组件封装到一个单一的HTML文件或我必须分开的JS部分，当涉及到进口？

例子：

<link rel="import" href="../bower_components/polymer/polymer.html"> 

<dom-module id="my-new-view"> 
    <template> 
    <style> 
    </style> 

    <h1>New view</h1> 
    </template> 

    <script> 

    import { myConstant } from '../module.js'; //<---- this throws error for the import' 

    Polymer({ 
     is: 'my-new-view' 
    }); 
    </script> 
</dom-module> 

Answer 1

只的WebPack

对于它这样的工作，你就必须module.js导出为一个库，因此可以的WebPack之外使用。一旦它是一个库的一部分，包括在全球范围内，你可以然后访问它像

var myConstant = Module.myConstant; 

Polymer({ 
    is: 'my-new-view' 
}); 

很可能更容易只是有你的JS代码在一个单独的文件。

请参阅https://stackoverflow.com/a/34361312/4722305。

保鲜盒

另外一个选择可能会调用到的WebPack之前运行https://github.com/PolymerLabs/crisper在你的代码。 Crisper将从您的代码中删除<script>标签，并将它们转换为JS文件，这些文件将与Webpack兼容。