如何将 TS 路径映射与 Firebase Cloud Functions 结合使用

Question

如何将 TS 路径映射与 Firebase Cloud Functions 结合使用？ 我尝试过但没有成功：

"baseUrl": ".",
  "paths": {
    "@custom-path/*": ["src/utils/*"],
    "@other-path/*": ["../other/path/*"]
  }

Answer 1

这是

2024

，最简洁的方法是使用 tsc-alias。

在

tsconfig.json

上，添加

baseUrl

并在

paths

下添加您的

compilerOptions

。比如：

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "@constants/*": ["api/constants/*"],
      "@interfaces/*": ["api/interfaces/*"],
      "@middlewares/*": ["api/middlewares/*"],
      "@modules/*": ["api/modules/*"],
      "@services/*": ["api/services/*"]
    },
    ...
}

然后，更改

serve

下的

build

和

package.json

脚本。喜欢：

...
  "scripts": {
    "build": "tsc && tsc-alias",
    "build:watch": "concurrently \"tsc -w\" \"tsc-alias -w\"",
    "serve": "concurrently --kill-others \"firebase emulators:start --only functions\" \"npm run build:watch\"",
    ...
  },
...

☝️这里我使用的是

concurrently

，但是随意使用你喜欢的任何东西。

就是这样。您现在可以使用定义的路径导入内容，例如：

import { messages } from '@constants/responses'
import CandidatesService from '@modules/candidates/candidates.service'
import { IModule } from '@interfaces/module.interface'

等等...

Answer 2

最后我能够使用

module-alias

NPM 包来做到这一点。

1. 将其安装为非开发依赖项：

   yarn add module-alias @types/module-alias

2. 创建一个文件

   fixTsPaths.ts

   或任何内容如下：

import * as ModuleAlias from 'module-alias';

ModuleAlias.addAliases({
    'common': __dirname + '/../../../common',
});

这是关于路径的技巧

/../../../common

：在我的例子中，这个文件夹位于

functions

之外，并且Typescript在构建期间复制文件夹结构，所以这可能是https://github.com/dividab/tsconfig的原因-paths 无法开箱即用。因此，在每种情况下，都需要检查此路径并找到适当的“..”计数:)

3. 最后将此文件导入到最顶部的

   index.ts

   中：

import './fixTsPaths';

希望这有帮助！

Answer 3

问题在于

no-implicit-dependencies: true

上的规则

tslint.json

。您可以传递其他参数将您的自定义路径列入白名单：

"no-implicit-dependencies": [true, ["@custom-path", "@other-path"]],

Answer 4

对于仍在解决此问题的任何人，但入口点文件 (main.ts) 顶部的以下代码。 如果 tsconfig.json 文件路径不在默认位置，请不要忘记调整它

const tsConfig = require('../tsconfig.json');
const tsConfigPaths = require('tsconfig-paths');
tsConfigPaths.register({
    baseUrl: __dirname,
    paths: tsConfig.compilerOptions.paths,
});

Answer 5

我可以使用 @zerollup/ts-transform-paths NPM 包来做到这一点。

1. 安装 @zerollup/ts-transform-paths 作为开发依赖项：

   yarn add -D @zerollup/ts-transform-paths

2. 设置以下 webpack + ts-loader 的配置。

const tsTransformPaths = require('@zerollup/ts-transform-paths');

module.exports = {
  ... // other config
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: 'ts-loader',
        options: {
          getCustomTransformers: (program) => {
            const transformer = tsTransformPaths(program);

            return {
              before: [transformer.before], // for updating paths in generated code
              afterDeclarations: [transformer.afterDeclarations] // for updating paths in declaration files
            };
          }
        }
      }
    ]
  }
};

查看更多详细信息：https://github.com/zerkalica/zerollup/tree/5aee60287647350215c81d0b2da5a30717d9dccb/packages/ts-transform-paths