浏览器和节点的firestore api答案

【问题标题】：firestore api for browser and node浏览器和节点的firestore api
【发布时间】：2019-01-01 02:23:50
【问题描述】：

我正在尝试为 firestore 构建一个 API - 一个将在浏览器和 node-js 上运行的模块相同。

所以我研究了下划线，试图找出他们是如何完成它的，我想出了一半的解决方案，但我仍然在导入 firebase 的浏览器环境中遇到一些错误

我收到一个错误 "require" is not a function，尽管我使用的其他地方 require 运行良好 - 一切都是使用 webpack 编译的。

所以我有 2 个初始化文件：

firebase-admin init（用于 node-js 环境）

const admin = require('firebase-admin')
const key = require("/path/to/sa.json")

const settings = { timestampsInSnapshots: true }
const app = admin.initializeApp({
  credential: admin.credential.cert(key),
  databaseURL: `https://${ key.project_id }.firebaseio.com`
})

const Firestore = app.firestore()
Firestore.settings(settings)

module.exports.app = app
module.exports = Firestore

firestore-client init（用于浏览器环境）

const firebase = require('firebase/app')
require('firebase/firestore')
require('firebase/auth')

const settings = { timestampsInSnapshots: true }
const config = {
  apiKey: "xxxxx",
  authDomain: "xxxxxx",
  databaseURL: "xxxxx",
  projectId: "xxxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxx"
}

const Firestore = firebase.firestore()
Firestore.settings(settings)

module.exports.app = !firebase.apps.length ? firebase.initializeApp(config) : firebase.app() // eslint-disable-line no-negated-condition
module.exports.Auth = firebase.auth()
module.exports = Firestore

这是我的 API 入口点

((function() {
  const root = this
  var api = {}
  if (typeof window === 'undefined') {
    // this works
    api.fs = require('./services/firebase-admin-init')
    module.exports = api
    root.api = api
  } else {
    // this require fails because of the require('firebase/app') inside the firebase-client init
    api.fs = require('./services/firebase-client-init')
    root.api = api
  }

  // this require works
  api.organization = new (require('./organization'))(api.fs)
})())

这是我的 webpack.conf.js

const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')
const nodeExternals = require('webpack-node-externals')

module.exports = {
  entry: './src/index.js',
  mode: 'production',
  target: 'web',
  externals: [nodeExternals()],
  node: {
    child_process: 'empty',
    fs: 'empty',
    http2: 'empty',
    net: 'empty',
    tls: 'empty',
  },
  output: {
    filename: 'api.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          // mangle: false,
          keep_fnames: true,
          keep_classnames: true,
          compress: {
            keep_fnames: true,
            keep_classnames: true,
          },
        },
      })
    ]
  }
}

关于如何使这个工作的任何想法？

【问题讨论】：

标签： javascript firebase webpack google-cloud-firestore

【解决方案1】：

尝试类似这种风格的东西：

((function() {
const root = this
var api = {}
if (typeof window === 'undefined') {
// this works
api.fs = require('./services/firebase-admin-init')
module.exports = api
root.api = api
} else {
// this require fails because of the require('firebase/app') inside the firebase-client init


const firebase = require('firebase/app')
require('firebase/firestore')
require('firebase/auth')

const settings = { timestampsInSnapshots: true }
const config = {
  apiKey: "xxxxx",
  authDomain: "xxxxxx",
  databaseURL: "xxxxx",
  projectId: "xxxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxx"
}

const Firestore = firebase.firestore()
Firestore.settings(settings)

api.app = !firebase.apps.length ? firebase.initializeApp(config) : firebase.app() 

api.auth = firebase.auth()
api.fs = Firestore
root.api = api
}

// this require works
api.organization = new (require('./organization'))(api.fs)

})())

希望对您有所帮助。新年快乐！

【讨论】：