Firebase Cloud Functions 无法识别转译的 ES5：firebase 未定义答案

【问题标题】：Transpiled ES5 not recognized by Firebase Cloud Functions: firebase is undefinedFirebase Cloud Functions 无法识别转译的 ES5：firebase 未定义
【发布时间】：2018-08-10 18:40:31
【问题描述】：

介绍一下，目前（在我写这篇文章的时候）Firebase 函数不支持更新版本的 node.js 中的 async 和 await 等功能。我试图通过将我的代码转换为他们当前支持的节点版本来克服这个问题。

我正在使用 webpack 3 来捆绑我的 react.js Web 应用程序。我设置了两个单独的配置 - 一个用于开发，另一个用于生产。我使用第三个配置作为生产管道上的第二个任务来执行 cloudfunctions.js 并将其吐出到部署目录 functions/index.js 使用 babel 转译代码，

我没有在 .babelrc 中描述转译要求，而是使用 webpack 将这些细节添加到规则中模块内部的选项配置对象中。

我已成功转换代码，但 Firebase 一直抱怨“firebase”未定义。我已将此错误的触发范围缩小到导入的第一行代码。

非常感谢任何可以为我指明正确方向的建议。

import functions from ''firebase-functions';

事实上，我已经尝试过 Commonjs（使用 require）并在 ES6 导入/导出方面进行了其他尝试。

Package.json：

{
  "scripts": {
  "start":"node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack/dev.config.js",
"build": "cross-env NODE_ENV=production node ./node_modules/webpack/bin/webpack.js --config webpack/prod.config.js"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0-beta.40",
    "firebase-admin": "^5.5.1",
    "firebase-functions": "^0.7.3",
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.40",
    "@babel/core": "^7.0.0-beta.40",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",
    "babel-loader": "^8.0.0-beta.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.1.3",
    "generate-json-webpack-plugin": "^0.2.2",
    "uglifyjs-webpack-plugin": "^1.1.8",
    "webpack": "^3.10.0",
    "webpack-merge": "^4.1.1"
  }
}

functions.config.js (webpack)

const
    path               = require('path'),
    pkg                = require('../package'),
    GenerateJsonPlugin = require('generate-json-webpack-plugin'),
    UglifyJSPlugin     = require('uglifyjs-webpack-plugin'),
    webpack            = require('webpack');

const externals = [
    'firebase-admin',
    'firebase-functions'
]

const genPackage = () => ({
    name         : 'functions',
    private      : true,
    main         : 'index.js',
    license      : 'MIT',
    dependencies : externals.reduce( (acc, name) => Object.assign({}, acc, { [name]: pkg.dependencies[name] || pkg.devDependencies[name] }), {} )
})

module.exports = {
    entry  : [
        '@babel/polyfill',
        path.join(__dirname, '../cloudfunctions.js')
    ],
    output : {
        path     : path.join(__dirname, '../functions/'),
        filename : 'index.js'
},
    module : {
        rules: [
            {
                test    : /\.js$/,
                loader  : 'babel-loader',
                options : 
                    {
                        presets : [
                            [ 
                                '@babel/env',
                                { 
                                    option : { 
                                        targets : { 
                                            node : '6.11.5'
                                        }
                                    }
                                }
                            ]                 
                        ],
                        plugins: [
                            '@babel/plugin-proposal-object-rest-spread'
                        ]   
                    }
                ,
                exclude : /node_modules/
            }
        ]
    },
    externals : externals.reduce( (acc, name) => Object.assign({}, acc, { [name]: true }), {} ),
    plugins   : [
        new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }),
        new UglifyJSPlugin(),
        new GenerateJsonPlugin('package.json', genPackage())
    ]
}

环境

操作系统：Windows 10
节点版本：8.9.4
Pkg 管理器：npm
外壳：Windows 外壳
浏览器和版本：Chrome 64.0.3282.186
语言：Javascript

预期行为

转译成功。
成功部署到 Firebase

实际行为

转译成功。在点击firebase deploy --only functions 命令后继续收到此日志并显示相同的错误：

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
+  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...

Error: Error occurred while parsing your function triggers.

ReferenceError: firebase is not defined
at Object.module.exports (C:\Users\Andrew Redican\Compass\functions\index.js:9040:18)
at __webpack_require__ (C:\Users\Andrew Redican\Compass\functions\index.js:20:30)
at Object.module.exports (C:\Users\Andrew Redican\Compass\functions\index.js:8967:17)
at __webpack_require__ (C:\Users\Andrew Redican\Compass\functions\index.js:20:30)
at Object.<anonymous> (C:\Users\Andrew Redican\Compass\functions\index.js:3687:18)
at __webpack_require__ (C:\Users\Andrew Redican\Compass\functions\index.js:20:30)
at C:\Users\Andrew Redican\Compass\functions\index.js:63:18
at Object.<anonymous> (C:\Users\Andrew Redican\Compass\functions\index.js:66:10)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)

cloundFunctions.js [输入]

let functions = require('firebase-functions');
const admin = require('firebase-admin');

admin.initializeApp(functions.config().firebase);

functions/index.js [输出]

取决于我是否包含 Uglify 插件，输出将被缩小或正常。
Webpack 也接受了@babel/polyfill，所以帮助函数被添加到这个文件中。

我没有包含 outfile，因为 unmifinify 版本有 9049 行代码长，而 minified 不清晰。

我试过了

使用 Babel 6，然后 Babel 7 仍然没有结果。
环境配置https://firebase.google.com/docs/functions/config-en
我尝试过直接硬编码提供访问对象。

我显然遗漏了一些东西，但我已经多次阅读这篇文章/repo。

其他说明

我试图摆脱打字稿并尽可能地处理承诺的回调地狱。我也在尝试不直接依赖 npm 直接运行命令，而是利用 webpack。

【问题讨论】：

看起来 webpack 可能是罪魁祸首。经过额外的测试，一旦有导入/要求，它似乎就会失败。看起来像这个问题：stackoverflow.com/questions/31799558/…

标签： javascript node.js babeljs firebase-admin webpack-3

【解决方案1】：

我能够让 webpack 使用 babel 将代码转换为函数/index.js。我发现了问题。

使用 webpack 时，请确保将 output.libraryTarget 指定为 'umd'。

下面是 webpack 配置文件：

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

const
    externals = [
        'firebase-admin',
        'firebase-functions'
    ], 
    genPackage = () => ({
        name    : 'functions',
        private : true,
        dependencies: externals.reduce(
            (acc, name) =>
                Object.assign({}, acc, {
                [name]:
                    pkg.dependencies[name] ||
                    pkg.devDependencies[name]
                }),
            {}
        )
    });

module.exports = {
    entry : [
      'babel-polyfill',
      './cloudfunctions.js'
    ],
    output: {
        path          : path.resolve(__dirname,'../functions'),
        filename      : 'index.js',
        libraryTarget : 'umd'
    },
    module : {
        rules : [
            {
                exclude : /node_modules/,
                loader  : 'babel-loader',
                query   : { 
                    presets : [ 'babel-preset-env' ] 
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js']
    },
    node: {
        fs  : 'empty',
        net : 'empty',
        tls : 'empty'
    },
    externals: externals.reduce(
        (acc, name) => Object.assign({}, acc, { [name]: true }),{}
    ),
    plugins: [
        new GenerateJsonPlugin('package.json', genPackage())
    ]
};

干杯！

【讨论】：