尝试在从外部项目导入类型时构建Firebase函数项目(一级)。在“”编译后丢失文件夹结构

Question

提前为这个问题感到抱歉，但是项目结构问题/bug是很难解释的。

我有一个Next.js项目，这是我的根项目。这是一个类型记录项目，所以它有自己的tsconfig.json

以下是基本结构：

> app    // APP COMPONENTS
> pages  // NEXT.JS PAGES
> types  // SOME GLOBAL TYPES FOR THE PROJECT
firebase.json
firestore.rules
storage.rules
tsconfig.json

我需要向这个项目添加云功能。所以我跟踪了医生：

https://firebase.google.com/docs/functions/typescript

基本上，我输入了firebase init functions并遵循了CLI的说明。

然后它创建了一个functions，如下所示( >符号表示一个文件夹)：

> app

> functions  // NEW FOLDER FOR THE FUNCTIONS PROJECT
  > src
    index.ts
  package.json
  tsconfig.json

> pages
> types
firebase.json
firestore.rules
package.json
storage.rules
tsconfig.json

现在请看到functions文件夹有自己的tsconfig.json文件和自己的package.json文件。从本质上讲，这是一项属于自己的工程。我不介意这个主意。

下面是创建的tsconfig.json文件：

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017"
  },
  "compileOnSave": true,
  "include": [
    "src"
  ]
}

它还向我的predeploy文件添加了一个firebase.json钩子。

"functions": {
  "predeploy": "npm --prefix \"$RESOURCE_DIR\" run build"
}

这对于在部署之前构建.ts文件是必要的。它将按照functions/src文件夹将functions/lib文件夹上的文件构建为tsconfig.json文件夹。

基本的helloWorld示例可以很好地构建和部署。我已经将一些文件添加到functions文件夹中，并使其全部工作。

查看我在functions/src上的文件

​

​

请参阅functions/lib上编译的文件

​

​

这是完全相同的结构和文件，正如您所期望的。

问题

当我从“外部”根项目导入一个类型时，问题就开始了。例如：

我在functions/src/index.ts上做了如下的事情：

import SomeType from "../../types/whatever"

// USE THE TYPE HERE

现在查看构建结果(即：functions/lib文件夹)：

​

​

现在，它基本上在lib文件夹下创建了另一个lib。它还基本上复制了我的types文件夹中的文件。我不知道它为什么要这么做。

我没想到会这样。我希望使用外部根项目中的类型，但不会干扰结果functions/lib文件夹的结构。

会发生什么事？

Answer 1

绕过它的一种方法是将共享类型声明为命名空间，并使用/// <reference path="...">命令导入它们。

这样，您将能够通过声明的命名空间访问您的类型，并且构建将保持所需的目录结构。

假设以下项目

my-project/
  functions/
    src/
      index.ts
  shared/
    type.d.ts
  ...otherFiles

shared.ts

declare namespace shared {
  interface IType {
    name: string
  }
}

index.ts

// eslint-disable-next-line
/// <reference path="../../shared/model.d.ts" /> 
import * as functions from "firebase-functions";

export const helloWorld = functions.https.onRequest((request, response) => {
  const type:shared.IType = {name: "John"};
  functions.logger.info("Hello logs!", {structuredData: true});
  response.send(`Hello ${type.name}!`);
});

如果您使用来自firebase模板的eslint默认规则(因为使用了// eslint-disable-next-line规则)，则需要@typescript-eslint/triple-slash-reference注释。