聚合物 1.0 + Webpack答案

【问题标题】：Polymer 1.0 + Webpack聚合物 1.0 + Webpack
【发布时间】：2015-06-24 13:46:23
【问题描述】：

目前我正在尝试使用 Webpack (http://webpack.github.io/) 作为我的模块构建器，并想看看是否有人使用 Polymer v1.0 完成了此操作。有一个名为 polymer-loader (https://www.npmjs.com/package/polymer-loader) 的 webpack 加载器，但它不适用于高于 Polymer v0.5 的任何东西。

【问题讨论】：

请告诉我们您的尝试。您的预期结果是什么，实际发生了什么？
他试过polymer-loader。正如他所说，它适用于 Polymer 0.5，但不适用于 1.0。
加载器由于 1.0 和 0.8 中的 API 更改而损坏，不幸的是没有人会修复它，因为到目前为止还没有 PR 排队。也许你可以先不加载加载器：像一般的 js 文件一样需要组件 js 文件和资产，然后 npm 安装库并设置配置文件。
在 Polymer 1.0 发布 (googledevelopers.blogspot.com/2015/05/polymer-10-released.html) 前至少 3 个月推送了对 polymer-loader (npmjs.com/package/polymer-loader) 的最后一次更新
我已经构建了一个包来处理聚合物/webcomponents 文件和 html 导入（支持代码重新加载）github.com/aruntk/wc-loader。查看。演示github.com/aruntk/polymer-webpack-demo

标签： javascript polymer webpack polymer-1.0

【解决方案1】：

很遗憾，由于 API 更改，Polymer 1.0 目前不受 polymer-loader 的支持。这可能会在不久的将来得到修复，但与此同时，您可能不得不求助于不同的软件包或构建器。希望能尽快修复。

【讨论】：

感谢上帝。到底谁想使用 Webpack？

【解决方案2】：

我用polymer-ext做了一个简单的解决方案

var PolymerExt = require('polymer-ext')

var t = require('raw!./test.tmpl')
var s = require('raw!./test.css')

PolymerExt({
  is: 'card-panel',
  template: t,
  style: s,
  ... // other polymer options
})

【讨论】：

【解决方案3】：

我刚刚通过这个加载器成功了：

https://github.com/aitoroses/vulcanize-loader

不明显的事情是我必须通过 bower 安装我想要的 web 组件（yarn 也可以完成这项工作）。之后，在手动创建的 importer.html 文件中手动引用它，然后在最后，在您的 js 模块中引用该 importer.html 文件：

import 'vulcanize!./importer.html';

【讨论】：