如何将TS路径Map与Firebase Cloud Functions配合使用

ubby3x7f  于 2023-03-24  发布在  其他
关注(0)|答案(5)|浏览(193)

如何将TS路径Map与Firebase Cloud Functions一起使用?我尝试了但没有成功:

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

n1bvdmb61#

最后,我可以用module-alias NPM包来实现这一点。
1.将其安装为非dev依赖项:yarn add module-alias @types/module-alias
1.创建一个文件fixTsPaths.ts或类似的文件,内容如下:

import * as ModuleAlias from 'module-alias';

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

以下是关于路径/../../../common的技巧:在我的例子中,这个文件夹在functions之外,Typescript在构建过程中复制了文件夹结构,所以这可能是https://github.com/dividab/tsconfig-paths无法开箱即用的原因。所以在任何情况下,都需要检查这个路径并找到合适的'..' count:)
1.最后,将此文件导入index.ts的最顶部:

import './fixTsPaths';

希望这有帮助!

e4eetjau

e4eetjau2#

它是2023,最简洁的方法是使用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下更改servebuild脚本。如下所示:

...
  "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'

等等。

z18hc3ub

z18hc3ub3#

问题出在tslint.json上的规则no-implicit-dependencies: true。你可以传递额外的参数来将你的自定义路径加入白名单:

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

sc4hvdpw4#

对于任何人谁仍然与这个问题的斗争,但下面的代码在入口点文件的顶部(main.ts).不要忘记调整tsconfig.json文件路径,如果它不是在默认位置

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

unguejic5#

我可以使用@zerollup/ts-transform-paths NPM包来实现这一点。
1.安装@zerollup/ts-transform-paths作为dev依赖项:yarn add -D @zerollup/ts-transform-paths
1.按照webpack + ts加载程序的配置进行设置。

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

相关问题