仅限Webpack

Question

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

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

有没有办法将我的Polymer组件封装到单个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>标记，并将其转换为与Webpack兼容的JS文件。

是否可以将模块导入Polymer组件？

1 个答案:

仅限Webpack

保鲜盒