Question

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

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

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

我成功地发现了代码，但Firebase一直在抱怨＆firebase＆＃39; firebase＆＃39;没有被定义。我已将此错误的触发器缩小到导入的第一行代码。

任何可以指向正确方向的建议都值得赞赏。

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())
    ]
}

Environtment

操作系统：Windows 10
节点版本：8.9.4
Pkg经理：npm
Shell：Windows Shell
浏览器＆amp;版本：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行，而缩小版本不是legibile。

我试过

使用Babel 6然后Babel 7仍然没有用。
Environment Configuartion https://firebase.google.com/docs/functions/config-en
我尝试直接提供硬编码的访问对象。

我显然遗漏了一些东西，但我现在已经多次查看过这篇文章/回购。

其他笔记

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

Answer 1

我能够让webpack使用babel将代码转换为functions / 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())
    ]
};

干杯！

Firebase云功能无法识别透明ES5：firebase未定义

1 个答案: