Polymer 和外部 node.js 库答案

【问题标题】：Polymer and external node.js LibrariesPolymer 和外部 node.js 库
【发布时间】：2016-02-29 08:35:45
【问题描述】：

我正在使用 Polymer 1.0，现在是时候添加一个外部 .JS 库了。
我要添加的库名为 SuperAgent，它是一个 Node.js 模块，能够为 XMLHttpRequests 提供强大的 API。 Polymer 的团队也建议这样做。

步骤 01 - 添加凉亭模块

$ bower install --save superagent

步骤 02 - 添加<script> 参考

<!-- SuperAgent -->
<script 
   type="text/javascript" 
   src="/bower_components/superagent/lib/client.js"></script>

现在我在 Chrome 中收到一条错误消息：

Uncaught ReferenceError: require is not defined

如果我检查 client.js 文件，它的开头有这些语句，这是我的错误的原因：

/**
 * Module dependencies.
 */

var Emitter = require('emitter');
var reduce = require('reduce');

现在，我的项目是使用专门 bower 完成的，我需要做什么才能使我的 Polymer 应用程序可以理解“require”？是否有执行此操作的凉亭组件 + 脚本？

【问题讨论】：

来自 SuperAgent 网站：“适用于 browserify，应该适用于 webpack”。将其中之一添加到项目的管道中。 require 在客户端不起作用，您需要其中一种工具将 SuperAgent 的代码转换为可部署的代码。
有什么理由选择一个“browserify”或另一个“webpack”吗？
Webpack 是当前很酷的孩子。 survivejs.com/webpack_react/webpack_compared
好的 @krl 我会看看 webkit。不幸的是，Polymer 1.0 没有任何关于如何使用外部凉亭组件的参考
使用外部组件不是 Polymer 特有的功能。问题是 superagent 通过 require 使用模块，这是本机 Node.js 模块格式，但受浏览器支持。这就是为什么你需要 Browserify ot Webpack 让它在浏览器中工作。或者，您可以使用仅浏览器的 HTTP 库，甚至是内置的 Fetch API developer.mozilla.org/en-US/docs/Web/API/Fetch_API（IE 不支持）

【解决方案1】：

我以前用过SuperAgent，对Polymer很熟悉（但没怎么用过）

SuperAgent 是一个服务器端 nodeJS npm 包，用于建立服务器以运行一批单元测试，然后将其关闭。

Polymer 是一个客户端工具，用于使 shadow DOM 的全部功能现在可用。

这两者如何协同工作我不知道，但 SuperAgent 使用的 require 语句是 nodeJS require 语句来要求其他模块。你的浏览器不理解 require 的原因是浏览器还不理解模块化（尽管他们很快就会使用 ES6 模块）。

【讨论】：

感谢您的回答，这就是重点，SuperAgent 是一个 node.js 脚本，而 Polymer 团队“出售”它作为复杂 XMLHttpReqeusts 的客户端框架。