如何在firebase云函数和角度之间共享打字稿类

Posted 2023-02-22

【中文标题】如何在firebase云函数和角度之间共享打字稿类

【英文标题】：How to share typescript class between firebase cloud functions and angular

【发布时间】：2020-03-07 03:54:06

【问题描述】：

我创建了一个 Angular 项目，在其中我初始化了 Firebase Cloud Functions。我的文件夹变成了这样：

project-root
  node_modules
  src
    app
      (angular components)
  functions
    node_modules
    src
      index.ts

我希望我的一些打字稿类可以在 Cloud Functions 和 Angular 中使用，而无需在两个文件夹中复制，但我不知道该怎么做。

如果可能，我还希望它们共享相同的节点模块。

【参考方案1】：

我找到了适合我需要的解决方案。

不要在functions和Angularapp上方创建一个文件夹，而是正常使用functions，让Angular使用functions文件夹中的文件。

在 Angular 的 tsconfig.json

  "compilerOptions": 
    "paths": 
      ...
      "@functions/*":["functions/src/*"]
    ,
    ...

在 Angular 的 ts 文件中

import  YourClass  from '@functions/your-class.ts'

最后的要求是让functions使用Angular的npm依赖。

转到 Angular 的 package.json，将所需的依赖项复制到 functions/package.json。

//functions/package.json


  "dependencies": 
    ...
    "rxjs": "~6.4.0"
  ,
  ...

现在您可以在云函数中使用像 rxjs 这样的依赖项，比如在 Angular 中没有 npm install 它在 functions 中。

//functions/src/index.ts

import  Observable, of  from 'rxjs';

【参考方案2】：

我遇到了类似的问题。我的解决方案是创建一个包含共享接口、类和实用程序的第三个包。然后我在 Angular 项目 package.json 和 /functions/package.json 中声明了该共享包作为依赖项。

【参考方案3】：

解决此问题的另一种方法是使用函数文件中的相对路径，如下所示：

import  MyClass from '../../src/MyClass';

使用此解决方案时，如果您引用的文件使用带有 @ 字符的路径导入其他文件，您将遇到问题，如下所示：

import  OtherClass from '@/classes/OtherClass'; // this will probably NOT work

要解决这个问题，您需要将引用文件中的所有此类路径替换为简单的相对路径。

您还需要在您的 functions/package.json 文件中更改主文件的路径，因为编译器需要在您的 lib 文件夹中添加完整的目录结构。在我的情况下，新路径需要是：

lib/functions/src/index.js

【参考方案4】：

我正在尝试第三种封装方法，例如 https://fireship.io/lessons/how-to-structure-a-large-web-app-project/

我认为我可以使用它，但现在它引入了新问题。就像每次对第三个包中的代码进行小的更改时，我都必须重新构建一个包，将其复制到需要的地方，npm install 等。还不知道如何进行构建自动化。而且绝对不高兴在 Angular 中丢失热重载，所以这可能比复制所有文件更糟糕。

===

实际上，使用npm link 似乎可以使包的使用者在编译时几乎立即获得更改。仍在测试。