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

【问题标题】：How to use TS Path Mapping with Firebase Cloud Functions如何将 TS 路径映射与 Firebase 云函数一起使用
【发布时间】：2018-12-03 22:10:47
【问题描述】：

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

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

【问题讨论】：

您是否尝试按照这些说明进行操作firebase.google.com/docs/functions/typescript ？
你好，贡萨洛。感谢您的回复。我知道如何使用打字稿，我不知道如何设置路径映射。 stackoverflow.com/questions/50785855/…这是完整的描述
我也很好奇如何做到这一点
@william 你找到解决方案了吗？
目前还没有解决方案，我会在一周左右的时间内回复它再试一次，但我没有运气

标签： firebase google-cloud-functions

【解决方案1】：

对于仍然在这个问题上苦苦挣扎的人，但下面的代码位于入口点文件 (main.ts) 的顶部。 tsconfig.json文件路径如果不在默认位置别忘了调整

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

【讨论】：

【解决方案2】：

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

安装@zerollup/ts-transform-paths 作为开发依赖：yarn add -D @zerollup/ts-transform-paths
按照 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
            };
          }
        }
      }
    ]
  }
};

【讨论】：

【解决方案3】：

问题是tslint.json 上的规则no-implicit-dependencies: true。您可以传递其他参数以将您的自定义路径列入白名单：

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

【讨论】：

即使你禁止 tslint，实际转译的 JS 也会尝试导入名为 @whatever-path 的第三方模块。我切换回相对导入。

【解决方案4】：

最后我能够使用module-alias NPM 包做到这一点。

将其安装为非开发依赖项：yarn add module-alias @types/module-alias
创建一个文件fixTsPaths.ts 或任何内容如下：

import * as ModuleAlias from 'module-alias';

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

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

最后将此文件导入您最顶部的index.ts：

import './fixTsPaths';

希望这会有所帮助！

【讨论】：

您可以从 tsconfig.json 生成该映射，不是吗？
生成别名的简单案例：ts import tsconfig from '../tsconfig.json'; import ModuleAlias from 'module-alias'; import path from 'path'; const { compilerOptions: { baseUrl } } = tsconfig; const aliases = Object.entries(tsconfig.compilerOptions.paths).reduce((acc, [key, [alias]]) => ({ ...acc, [key.replace('/*', '')]: path.join('../', baseUrl, alias).replace('/*', '/'), }), {}); ModuleAlias.addAliases(aliases);
@BennyPowers 这很简单吗？我不想看到复杂的那么 /s
我很后悔使用“简单”这个词。我应该写的是“这是一个可能的实现，它读取 tsconfig 中的别名并将它们应用到 ModuleAlias”谢谢@Spock 在我使用加载的语言时给我打电话。
@Benny Powers 只是在开玩笑；）.. 我只是觉得自己像个白痴呵呵