Question

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

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

我遇到错误"require" is not a function，尽管我在其他地方使用require可以完美运行-一切都使用webpack进行编译。

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

firebase-admin初始化（用于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初始化（用于浏览器环境）

-

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

关于如何使这一功能有效的任何想法？

Answer 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)

})())

希望此帮助。新年快乐！

用于浏览器和节点的firestore API

1 个答案: