Firebase webpack+babel 函数未部署

Question

是否可以让 firebase 函数与 webpack 和 babel 一起工作？

我们需要在服务器端重用我们无法编辑的现有 ES6 类，因此我们需要转换它们以使其在节点中工作。

在相关教程上花了两天时间，但我遇到了一个问题，即 firebase 似乎看不到 index.js 中声明的函数，这些函数被 webpack 包装在一个函数中。

这是生成的 index.js 的一部分:

(function(module, exports, __webpack_require__) {

    var functions = __webpack_require__(/*! firebase-functions */ "firebase-functions");
    var admin = __webpack_require__(/*! firebase-admin */ "firebase-admin");
    admin.initializeApp();

    exports.api = functions.https.onRequest(function (req, res) {
      res.send({
        msg: "ok"
      });
    });

})

exports.api = functions.https.onRequest 在这种情况下没有部署。

有没有可能让 firebase 与 webpack 和 babel 一起工作？

Answer 1

我遇到了类似的挑战。我对开发方面的自动化方式并不完全满意(在接下来的几天里我会花更多时间在这方面)，但它确实有效。

我将尝试通过更改代码和说明来消除不相关的复杂性来讲述我是如何做到的。

我的主要目标不是手动维护一个“functions”文件夹，它有自己的 package.json 作为一个独立于我的主要项目的项目。根源代码中的所有内容和一些 webpack 魔法就足够了。

1 - 我的入口点源代码位于/src/main 文件夹内的 app.js 文件中。它是这样写的:

import * as functions from 'firebase-functions';
import { someProcessedOutputThatDependsOnExternalLibraries } from './my-code';

export const hello = functions.https.onRequest((req, res) => {
  functions.logger.info('Hello logs!', { structuredData: true });
  const output = someProcessedOutputThatDependsOnExternalLibraries(req)
  res.send(output).end();
});

2 - 我想将它导出到/dist 文件夹，所以我必须在项目根目录的 firebase.json 文件中设置该文件夹:

{
  "functions": {
    "source": "dist"
  },
  "emulators": {
    "functions": {
      "port": 5001
    },
  }
}

3 - 根目录中的 package.json 文件包含项目所需的所有信息，尤其是依赖项和有用的脚本。这里部分文件内容进行说明。

{
  "scripts": {
    "env:firebase": "firebase emulators:start",
    "build:firebase": "webpack --config webpack.firebase.js",
  },
  "dependencies": {
    "axios": "^0.21.0",
    "core-js": "^3.8.1",
    "firebase-admin": "^9.4.2",
    "firebase-functions": "^3.13.1",
    "inquirer": "^7.3.3",
    "regenerator-runtime": "^0.13.7",
    "rxjs": "^6.6.3",
    "uuid": "^8.3.2",
    "xstate": "^4.15.3"
  },
  "devDependencies": {
    "generate-json-webpack-plugin": "^2.0.0",
    "webpack": "^5.15.0",
    "webpack-cli": "^4.3.1",
    "webpack-node-externals": "^2.5.2"
  }
}

4 - Webpack 用于构建与 firebase 规范兼容的 dist 文件夹。下面的 webpack 文件几乎完全复制自这个祝福 github gist .

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const GenerateJsonPlugin = require('generate-json-webpack-plugin');
const pkg = require('./package.json');

const genFirebaseFunctionsPackage = () => ({
  name: 'functions',
  private: true,
  main: 'index.js',
  license: 'MIT',
  engines: {
    node: '14'
  },
  dependencies: pkg.dependencies
});

module.exports = {
  target: 'node',
  mode: 'production',
  entry: './src/main/functions.js',
  externals: [nodeExternals()],
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs'
  },
  node: {
    __dirname: false,
    __filename: false
  },
  optimization: {
    minimize: false
  },
  plugins: [new GenerateJsonPlugin('package.json', genFirebaseFunctionsPackage())]
};

5 - 因此，如果我运行 npm run build:firebase，则会使用 index.js 和 package.json 创建 dist 文件夹文件。 dist 目录现在与 firebase CLI 和模拟器预期兼容。

但要在本地模拟器中运行它，我仍然必须转到该文件夹​​并输入“npm install”(这是我仍在努力解决的痛点)。