如何让 Thrift 与 Angular 2 和 webpack 一起工作？答案

【问题标题】：How to make thrift to work with Angular 2 and webpack?如何让 Thrift 与 Angular 2 和 webpack 一起工作？
【发布时间】：2016-11-30 12:53:04
【问题描述】：

从一个简单的 Angular 2 + Webpack 工作项目中，我尝试通过实现 Thrift 的教程来集成 Apache Thrift。除了浏览器找不到 Thrift 模块外，我达到了一切正常的地步：

Uncaught ReferenceError: Thrift is not defined

当尝试访问 thrift 模块时，thrift 生成的文件tutorial_types.js 会抛出错误：

InvalidOperation = function(args) {
  this.whatOp = null;
  this.why = null;
  if (args) {
    if (args.whatOp !== undefined && args.whatOp !== null) {
      this.whatOp = args.whatOp;
    }
    if (args.why !== undefined && args.why !== null) {
      this.why = args.why;
    }
  }
};
Thrift.inherits(InvalidOperation, Thrift.TException);

Angular 加载应用程序，该应用程序加载生成的文件，尝试加载 Thrift 并失败。

该项目在此处可用：https://github.com/osechet/angular-thrift

要测试，运行：

git clone https://github.com/osechet/angular-thrift
cd angular-thrift
npm install
npm gen.thrift
npm start

然后在浏览器中打开http://localhost:8080/。

我检查了 Webpack 创建的文件，并且捆绑了 thrift 模块。我错过了什么？

【问题讨论】：

如果您可以将引发错误的代码部分添加到您的问题中会很有帮助 - 要求人们安装您的项目并自己运行它是很多的。
@JoeClay 你是对的。我对此进行了澄清。
嗯，Thrift 真的会在生成的文件中导入 in 吗？如果不是，那可能就是事情失败的原因。您需要找到一种方法让 Thrift 生成顶部带有 var Thrift = require("thrift"); 的文件，或者从您的一个文件中导入它并将其附加到全局环境 (window.Thrift)。
@JoeClay 感谢您的评论。这让我发现 Thrift 的 js 库没有导出任何模块。我将我的项目更改为使用 nodejs 库的浏览器模块并且它可以工作。

标签： angular webpack thrift

【解决方案1】：

感谢@JoeClay 的评论，我找到了问题所在。 Thrift 提供的 Javascript 库不导出任何模块，因此没有被 Webpack 正确捆绑。

我将项目更改为使用 Thrift (thrift/lib/nodejs/lib/thrift/browser.js) 提供的 nodejs 库的浏览器模块。这样做，我已经能够使整个应用程序工作。

【讨论】：

很高兴听到我能帮上忙 :)