NodeJS 不会导入非 NodeJS 文件

Question

我的网站上有以下两个文件：

firebase.js
gridsome-server.js

firebase.js 是一个 'regular' javascript 文件，其内容如下：

import firebase from 'firebase/app'
import 'firebase/firestore'

const config = {
  apiKey: '[APIKEY],
  authDomain: '[AUTHDOMAIN],
  databaseURL: '[DATABASEURL],
  projectId: '[PROJECTID],
  storageBucket: '[STORAGEBUCKET],
  messagingSenderId: '[MESSAGINGSENDERID],
  appId: '[APPID]'
}

firebase.initializeApp(config)

const db = firebase.firestore()

export default db

现在，我想将默认导出 (db) 导入 gridsome-server.js -（我相信）这是一个 nodejs 文件。现在，我认为我可以执行以下操作：const db = require('./src/config/firebase.js') - 但那没有用。我收到以下错误消息：

Initializing plugins...
SyntaxError: gridsome.server.js: Unexpected identifier (1:12)

> 1 | const db = require('./src/config/firebase')
    |            ^
  2 |
  3 | module.exports = function(api) {
  4 |   api.loadSource(({ addCollection }) => {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

所以我把require改成了import——如下：import db from './src/config/firebase。但这也给了我一个错误：

Initializing plugins...
C:\code\tutorials\vue\gridsome\vuetify-gridsome\gridsome.server.js:2
import db from './src/config/firebase'
       ^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Plugins.initialize (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\Plugins.js:45:11)
    at App.init (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\App.js:120:18)
    at App.bootstrap (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\App.js:49:16)
    at module.exports (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\index.js:12:18)
    at module.exports (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\develop.js:20:21)
    at C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\index.js:44:12
    at Command.program.command.description.option.option.action.args (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\index.js:13:44)
    at Command.listener (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\commander\index.js:315:8)
    at Command.emit (events.js:198:13)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

所以我被卡住了——如何将 firebase.js 导入 gridsome-server.js？

更新

我还尝试更改为 firebase.js 中的命名导出（即更改为 export const db）并使用 gridsome-server.js 中的命名导入（即 import { db } from...）。这也会导致错误：

Initializing plugins...
C:\code\tutorials\vue\gridsome\vuetify-gridsome\gridsome.server.js:2
import { db } from './src/config/firebase'
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Plugins.initialize (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\Plugins.js:45:11)
    at App.init (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\App.js:120:18)
    at App.bootstrap (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\App.js:49:16)
    at module.exports (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\index.js:12:18)
    at module.exports (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\develop.js:20:21)
    at C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\index.js:44:12
    at Command.program.command.description.option.option.action.args (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\index.js:13:44)
    at Command.listener (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\commander\index.js:315:8)
    at Command.emit (events.js:198:13)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Answer 1

我认为问题在于您的导入方式FireBase

import firebase from 'firebase/app'

来自 NPM website

上的文档

If you are using native ES6 module with --experimental-modules flag, you should do: import firebase from 'firebase/app';

否则你应该像这样导入

const firebase = require('firebase');

NodeJS 不会导入非 NodeJS 文件

NodeJS Won't Import a Non-NodeJS File

javascript

commonjs

node.js

webpack

vue.js