是否可以將模塊導入聚合物組件？

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兼容。