Firebase Webpack + Babel函数未部署 [英] Firebase webpack+babel functions not deploying

问题描述

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

Is it possible to make firebase functions work with webpack and babel?

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

We need to reuse existing ES6 classes on server side which we can't edit so we need to transpile them to make it work in node.

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

Spent two days on the related tutorials but I'm hitting the problem where firebase can't seem to see functions declared in index.js after they were wrapped by webpack in a function.

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

here is a part of the resulting 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 =函数.在这种情况下，https.onRequest 未部署.

是否有可能使Firebase与webpack和babel一起使用?

Is it ever possible to make firebase work with webpack and babel?

推荐答案

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

I had a similar challenge. I am not completely satisfied with how things are automated on the dev side (I will give more time on that during the next few days), but it is working indeed.

我将尝试通过更改代码和说明以消除无关的复杂性来告诉我我是如何做到的.

I will try to tell how I did it by changing code and instructions to remove unrelated complexity.

我的主要目标不是手动维护功能".文件夹，其中包含自己的package.json，这是与我的主要项目分开的一个单独项目.驻留在根源代码中的所有内容和一些webpack魔术都足够.

My main goal is not to manually maintain a "functions" folder with its own package.json as a separate project from my main one. Everything that resides in the root source code and some webpack magic should suffice.

1-我的入口点源代码在/src/main文件夹内的app.js文件中.内容如下:

1 - My entry point source code in a app.js file inside a /src/main folder. It reads like this:

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文件中设置该文件夹:

2 - I want to export it to a /dist folder, so I have to set up that folder in the firebase.json file in the project root:

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

3-根目录中的package.json文件保存了项目所需的所有信息，尤其是依赖项和有用的脚本.这里有一些文件内容可以说明.

3 - The package.json file in the root holds all the information needed for the project, especially the dependencies and useful scripts. Here some of the file content to illustrate.

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

4 - Webpack is used to build a dist folder compatible with firebase specs. The webpack file below is almost entirely copied from this blessed 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 ，则dist文件夹是使用 index.js 和 package.json 创建的文件. dist 目录现在与Firebase CLI和仿真器期望兼容.

5 - So, if I run npm run build:firebase, the dist folder is created with index.js and package.json files. The dist dir is now compatible with firebase CLI and emulator expectations.

但是要在本地仿真器中运行它，我仍然必须转到该文件夹​​并键入"npm install".(这就是我仍要解决的难题).

But to run it in the local emulator, I still have to go to that folder and type "npm install" (that's the pain point I'm still trying to solve).

这篇关于Firebase Webpack + Babel函数未部署的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！