1

我们希望在基于 node/webpack/babel/ES6/React 的项目中使用 Rollbar.js。目前还不是 100% 清楚使用正确的 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”错误就会消失，但“适当的加载程序”错误仍然存​​在。

4

1 回答 1

1

我遇到了同样的问题。我通过以下方式修复了它：

  1. 安装fs使用npm install --save fs. 或者，您可以node: {fs: "empty"}按照评论中的建议添加到您的 webpack 配置中。其中任何一个都负责fs在 rollbar/lib/parser.js 中的导入。
  2. 安装一个json loader，然后将此 loader 添加到你的 webpack 配置中 modules -> loaders 下。这会通知 webpack 在加载 JSON 文件时应该使用 json 加载器。然后 Webpack 应该能够导入package.json到 rollbar/lib/notifier.js 中。 
    module: {
    loaders: [
        {
            test: /\.json$/,
            loader: "json"
        },
        ...
    ],
    ...
}
于 2016-08-05T20:16:00.250 回答