javascript - 在 Angular 2 中使用浏览器化的 JS 库

Question

我想在我的 Angular 2 项目中使用 libquassel ( https://github.com/magne4000/node-libquassel )。该库是浏览器化的，所以理论上它应该可以工作，但我不确定如何将它导入我的项目。

我尝试添加到我的 typings.d.ts

declare module 'libquassel';

然后用

导入库

import * as Quassel from 'libquassel';

但是我明白了

EXCEPTION: net.Socket is not a function

当我尝试运行我的代码时，我认为这是另一个嵌入在 client/libquassel.js 文件中的 browserify 库。

我如何使用这个库？

编辑:我会在这里回答所有问题:

• 我的设置是一个普通的 angular-cli 项目。没有花哨的东西，只是 ng new proj1 然后 npm install libquassel --save。
• 我的 index.html 没有任何 ng new 没有放在那里的东西。
• 我尝试使用 import * as Quassel from 'libquassel' 和 var Quassel = require('quassel')(以及它们的排列)导入库，但没有任何运气(错误从 unknown function 'require' 到 can't find module lib|quassel)。

• 重现我的项目的步骤:

  ng new test
  cd test
  npm install libquassel --save
  ng g s quassel
  

然后将QuasselService添加到app.module.ts中的providers数组中。这将是我的问题的一个很好的演示，即如何在我的 QuasselService 中导入 libquassel。

Answer 1

更新(修复它，这次是真的)

它在您的代码中不起作用的原因很充分:因为我对您撒了谎。如果您还没有自己“区分”它，那么这是我真正的作弊方法。

我仍然需要 require libquassel 2 次，但第一次不是通过调用 require 完成的，这是无用的，而是通过将它添加到 angular- cli.json 到 scripts 部分:

  "scripts": [
    "../node_modules/libquassel/client/libquassel.js"
  ],

这很重要，因为“client/libquassel.js”声明了它自己的 require 但没有显式导出它，所以如果你这样做了

require('libquassel/client/libquassel.js');

libquassel 的自定义 require 卡在匿名命名空间中，您无法访问它。另一方面，将它添加到 scripts 部分，让 libquassel.js 使用其 require 污染全局命名空间(即 window)，从而让它起作用。

所以让它工作的实际步骤是:

1. 将 client/libquassel.js 添加到 angular-cli.json 的脚本部分
2. 使用额外的require来实际加载Quassel模块

let Quassel = window['require']('quassel'); // note that usingg require('quassel') leads to compilation error
let quasselObj = new Quassel(...);

---

这是我的尝试。看起来你需要 require "quassel"两次:第一次从 "../node_modules/libquassel/client/libquassel.js"加载 JS，第二次让覆盖的 require 从那个 JS 实际上解析“quassel”。这是一个在“main.ts”中似乎对我有用的技巧:

require('../node_modules/libquassel/client/libquassel.js');
let Quassel = window['require']('quassel'); // note that using require('quassel') leads to compilation error
let quasselObj = new Quassel(...);

我还需要一个技巧来避免因编译错误而失败:特别是我必须使用 window['require'] 而不是仅仅 require 进行第二次调用它是对 client/libquassel.js 中定义的内部 require 的调用，单独使用 Node/Angular-cli 无法处理它。

请注意，在该设置之后，我的应用程序仍然因某些 AJAX 中的运行时错误而失败，因为浏览后的 libquassel.js 似乎需要在服务器端的 URL 上设置代理，例如 /api/vm/net/connect 这可能是 net-browsify 的服务器端应该可以，但我没有尝试设置它。

回复评论

看起来你使用的是旧版本的 Angular-CLI，如果你升级一切应该都可以正常工作。

这是 ng --version 在我原来的机器上告诉我的内容

angular-cli: 1.0.0-beta.28.3
node: 6.10.0
os: win32 x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/compiler-cli: 2.4.10

当我试图将我的原始项目复制到另一台机器时，我也遇到了关于 require 的编译错误，但是当我将 Angular-CLI 更新为

@angular/cli: 1.0.0
node: 6.10.0
os: darwin x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0
@angular/compiler-cli: 2.4.10

它编译和工作相同。我所做的只是按照说明进行操作

The package "angular-cli" has been deprecated and renamed to "@angular/cli".

Please take the following steps to avoid issues:
"npm uninstall --save-dev angular-cli"
"npm install --save-dev @angular/cli@latest"

然后按照 ng serve

的说明更新 angular-cli.json