难以在基于节点/webpack的项目中构建rollbar.js

Question

我们希望在我们的节点/webpack/babel/ES6/React基础项目中使用Rollbar.js。目前还不完全清楚应该使用什么NPM软件包，但似乎是这样的：

https://www.npmjs.com/package/rollbar

从这里开始，说明非常简单:添加对package.json的引用，安装，然后离开。下面是package.json中的参考

"rollbar": "0.6.2",

运行npm install似乎运行得很好，但是当我运行npm start时，我在控制台中得到了以下错误：

ERROR in ./~/rollbar/lib/parser.js
Module not found: Error: Cannot resolve module 'fs' in [myProjectRoot]node_modules/rollbar/lib
 @ ./~/rollbar/lib/parser.js 7:9-22

ERROR in ./~/rollbar/package.json
Module parse failed: [myProjectRoot]node_modules/rollbar/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:9)
    at Parser.pp.raise ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
    at Parser.pp.unexpected ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8)
    at Parser.pp.semicolon ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1469:73)
    at Parser.pp.parseExpressionStatement ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1994:8)
    at Parser.pp.parseStatement ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1772:188)
    at Parser.pp.parseBlock ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:2009:21)
    at Parser.pp.parseStatement ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1753:19)
    at Parser.pp.parseTopLevel ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1666:21)
    at Parser.parse ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1632:17)
    at Object.parse ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
 @ ./~/rollbar/lib/notifier.js 14:18-44

我无法理解这件事。这似乎表明，我的webpack项目不能解析Rollbar的package.json文件，但这似乎是不可能的，因为我的webpack项目有无数其他NPM包，每个包都有自己的package.json文件。

有人遇到过这个问题吗？

更新：

如果与此相关，下面是我们完整的webpack.config.js文件：

const path = require('path');
const webpack = require('webpack');
const glob = require('glob');

const modulesDirectories = glob.sync('src/**');
const assetsDirectories = glob.sync('assets/**');
Array.prototype.push.apply(
    modulesDirectories,
    assetsDirectories
);
modulesDirectories.push('assets');
modulesDirectories.push('/');
modulesDirectories.push('node_modules');


const modulesDirectoriesWithoutFiles = modulesDirectories.filter(directory => {
    if (directory.slice(-4, -3) === '.' || directory.slice(-3, -2) === '.') {
        return false;
    }
        return true;
});


module.exports = {
  cache: true,
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'eventsource-polyfill',
    'webpack-hot-middleware/client',
    './src/index.js'
  ],
  module: {
    loaders: [
            {
          test: /\.(js|jsx)$/,
          loader: 'babel',
          query: {
              // https://github.com/babel/babel-loader#options
              cacheDirectory: true
          },
          include: path.join(__dirname, 'src'),
          exclude: /node_modules/
        },
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /\.woff|.ttf|.eot|.woff2$/, loader: `file-loader` },
        { test: /\.(png|jpe?g|gif|svg)$/, loader: `url-loader?limit=8192` },
        ]
    },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
        FIREBASE_CONFIG: JSON.stringify({
                apiKey: [ourApiKey],
                authDomain: [ourDomain],
                databaseURL: [ourUrl],
                storageBucket: [ourBucket],
              })   
    })

  ],
  resolve: {
    extensions: ['', '.js', '.jsx'],
    root: __dirname,
    modulesDirectories: modulesDirectoriesWithoutFiles,
  } 
};

第二次更新：

仍然无法建立东西，但我有更多的信息。如果我从代码中删除了Rollbar导入，那么控制台错误就会消失。我尝试以两种方式导入Rollbar，如下所示：

import rollbar from "rollbar"; var Rollbar = require('rollbar');

两次尝试都会产生相同的错误。如果我将node: {fs: "empty"}添加到我的webpack.config.js文件中，那么'fs‘错误就会消失，但是“适当的加载程序”错误仍然存在。

Answer 1

我也遇到了同样的问题。我用以下方法修正了它：

1. 使用fs安装npm install --save fs。或者，您可以按照注释中的建议，将node: {fs: "empty"}添加到webpack配置中。这两种方法都负责rollbar/lib/parser.js中的fs导入。
2. 安装一个json装载机，然后将这个加载程序添加到模块->加载器下的webpack配置中。这告诉webpack在加载json文件时应该使用JSON加载器。Webpack应该能够在rollbar/lib/notifier.js中导入package.json。模块：{加载程序：{ test: /.json$/，加载程序："json“}，.