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

Posted 2023-03-08

【中文标题】是否可以将模块导入 Polymer 组件？

【英文标题】：Is it possible to import modules into a Polymer component?

【发布时间】：2017-04-01 16:04:00

【问题描述】：

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

我使用 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>

【参考方案1】：

仅 Webpack

为了让它像那样工作，你必须将module.js 导出为一个库，以便它可以在 Webpack 之外使用。一旦它成为库的一部分并包含在全局范围内，您就可以像访问它一样访问它

var myConstant = Module.myConstant;

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

将 JS 代码放在单独的文件中可能会容易得多。

见https://***.com/a/34361312/4722305。

保鲜盒

另一种选择可能是在调用 webpack 之前在您的代码上运行 https://github.com/PolymerLabs/crisper。 Crisper 将从您的代码中删除 <script> 标签并将它们转换为与 Webpack 兼容的 JS 文件。