Question

在firebase函数项目中，我想在settings.json中进行一些设置，然后将这些设置导入到我的打字稿文件中。由于某种原因，导入似乎没有成功，我也看不出原因。

我的文件夹/文件结构如下：

src
 - database
   - index.ts <-- only exports uppercase.ts
   - uppercase.ts
 - regions.ts

在uppercase.ts中，我导入region.ts以将具有配置功能的对象用于在europe-west1上部署。

import { functionsEUWest1 } from '../regions';

export const uppercase = functionsEUWest1.database.ref('/messages/{pushId}/original').onCreate((snapshot, context) => {
    //Code as can be found in the tutorials of firebase.
});

在区域中，我尝试从settings.json读取设置以用于配置。

import functions from 'firebase-functions';
import settings from "./settings.json";

const region: any = settings.region;

export const functionsEUWest1 = functions.region(region);

这是settings.json的内容

{
    "region": "europe-west1"
}

构建输出的文件夹/文件结构是相同的（仅在lib中而不是src中，但是默认情况下是由firebase配置的。）

当我尝试部署功能时，出现以下错误：

Error: Error occurred while parsing your function triggers.

TypeError: Cannot read property 'region' of undefined
    at Object.<anonymous> (<local basepath>\functions\lib\regions.js:9:57)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (<local basepath>\functions\lib\database\uppercase.js:3:19)
    at Module._compile (module.js:653:30)

当我查看regions.js文件中的构建输出时，我无法检测到任何罕见的已编译代码：

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const firebase_functions_1 = __importDefault(require("firebase-functions"));
const settings_json_1 = __importDefault(require("./settings.json"));
const region = settings_json_1.default.region;
exports.functionsEUWest1 = firebase_functions_1.default.region(region);
//# sourceMappingURL=regions.js.map

还将settings.json复制到构建位置，并与regions.js放在同一文件夹中。但是setting_json_1的默认属性是未定义的，我不知道出了什么问题。

Answer 1

这取决于您的某些构建和tsconfig设置。我已经看到上面的方法对某些人有效，它使用默认导出。但是对我而言（带有json-loader的Webpack），这就是我用来导入JSON文件的方式：

import * as settings from "./settings.json";

当然，就我而言，我在global.d.ts文件中添加了这样的定义：

declare module "*.json";

所以TS不会对此抱怨。

Answer 2

经过一些进一步的研究之后，我发现不是json导入似乎不起作用，但是看起来像设置

"esModuleInterop": true

就我所知和结论而言，

似乎无法与Firebase一起使用，或者可能更具体：Firebase函数。

结论研究

首先，我想弄清楚TypeScript中的导入是否确实可以正常工作，因此我创建了3个.ts文件和一个.json文件以及放在文件夹中的一个.ts文件。然后我用

生成了tsconfig.json

tsc --init

，然后添加了2个设置（resolveJsonModule和esModuleInterop）。我将.ts文件转换为.js文件，并使用node运行代码。这样就可以了，我从控制台上打印的.json文件中看到了设置值。

导入.json文件的.ts文件具有以下代码行：

import settings from "./settings.json";

console.log('from test.ts: ' + settings.setting1);

export const Settings = settings;

这被翻译成：

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var settings_json_1 = __importDefault(require("./settings.json"));
console.log('from test.ts: ' + settings_json_1.default.setting1);
exports.Settings = settings_json_1.default;

现在，我不完全理解此代码，因为我不知道__importDefault或mod是什么。

但是此代码与其他代码一起完成了它应该做的事情：从.json文件中读取设置并在控制台中将其打印出来。因此，导入.json文件确实可以。因此，它必须使用Firebase进行处理。

我要做的下一步是创建一个使用功能和托管的干净的Firebase项目。在firebase CLI生成的functions / src文件夹中的index.ts中，我将代码更改为：

import functions from 'firebase-functions';
import settings from "./settings.json";

const setting1 = settings.setting1;

export const helloWorld = functions.region('europe-west1').https.onRequest((request, response) => {
  response.send("Hello from Firebase! Settings1 value = " + setting1);
});

我还向tsconfig.json中添加了相同的2个设置（resolveJsonModule和esModuleInterop）。当我尝试将此功能部署到Firebase云时，出现与我在Question文章中提到的错误相同的错误：

TypeError: Cannot read property 'region' of undefined

但是这次，我的.json文件中没有属性区域。因此，我在问题中的代码中包含区域的事实以及我没有查看stacktrace的行号的事实误导了我，使我认为.json导入无效。但它正在工作。

导致错误的原因是在firebase_functions_1.default上调用的方法区域。由于某种原因，默认值是undefined，并且正在生成错误。这也使我意识到我真的错过了错误中一个或多个对象的名称。我想看到的是类似的

TypeError: Cannot read property 'region' of undefined (firebase_functions_1.default)

因此，回到问题所在，我仍然遇到错误，但这不是由.json导入引起的。为了弄清实际原因，我首先还原了tsconfig.json中的“ esModuleInterop”设置，这导致我的index.ts中的import部分出错。我不得不将导入更改回

import * as functions from 'firebase-functions';
import * as settings from "./settings.json";

现在，通过导入.json文件，再次部署到Firebase云。同样，在不使用“ esModuleInterop”设置的情况下，已编译的代码看起来也有所不同：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const functions = require("firebase-functions");
const settings = require("./settings.json");
const setting1 = settings.setting1;
exports.helloWorld = functions.region('europe-west1').https.onRequest((request, response) => {
    response.send("Hello from Firebase! Settings1 value = " + setting1);
});
//# sourceMappingURL=index.js.map

它不再在firebase_functions_1上具有默认属性，而是现在仅具有函数。

在javascript中导入json似乎不成功

2 个答案: