Question

能否使firebase函数与webpack和babel一起使用？

我们需要在服务器端重用现有的ES6类，因为这些类我们无法编辑，因此我们需要对其进行转换以使其在节点中正常工作。

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

这是生成的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

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

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

我的主要目标不是手动维护一个带有自己的 package.json 的“functions”文件夹，作为一个独立于我的主要项目的项目。驻留在根源代码中的所有内容和一些 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”（这是我仍在尝试解决的痛点）。

Firebase Webpack + Babel函数未部署

1 个答案: