如何将 TS 路径映射与 Firebase 云函数一起使用

Question

如何将 TS 路径映射与 Firebase 云函数一起使用？ 我试过没有成功：

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

Answer 1

最后，我能够使用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 2

问题在于tslint.json上的no-implicit-dependencies: true tslint.json 。 您可以传递额外的参数来将您的自定义路径列入白名单：

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

Answer 3

我能够使用@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

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

现在是2022 ，最巧妙的方法是使用tsc-alias 。

在tsconfig.json ，添加baseUrl并在compilerOptions下添加您的paths 。 就像是：

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

然后，在package.json下更改您的serve和build脚本。 喜欢：

...
  "scripts": {
    "build": "tsc && tsc-alias",
    "build:watch": "tsc-alias --watch",
    "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'

ETC...