webpack 从 babel 错误中隐藏堆栈跟踪答案

【问题标题】：webpack hide stack trace from babel errorswebpack 从 babel 错误中隐藏堆栈跟踪
【发布时间】：2016-01-16 14:41:26
【问题描述】：

我有一个比较标准的 webpack 设置：webpack + babel-stage-0

如果有语法错误，babel 会给我一个非常有用的错误消息，但还有一个与我的代码完全无关的堆栈跟踪，它通常比终端本身更长。

有没有办法隐藏Parser.pp.raise的堆栈跟踪

我知道这是一件很小的事情，但是隐藏堆栈跟踪将意味着更少的视觉噪音，而且我不必向上滚动半个终端窗口即可看到我的错误消息。

我尝试过的事情

我尝试使用以下命令隐藏标准错误：

webpack --watch > /dev/null

但它似乎没有帮助。

【问题讨论】：

标签： webpack babeljs javascript-build

【解决方案1】：

我也遇到了同样的问题，显然没有真正的解决方案。所以我想出了一个技巧：

$ webpack --watch --color | grep -v '^ at .*/node_modules/'

这将过滤 webpack 输出以删除 node_modules 目录的回溯，--color 选项确保 grep 不会删除您的颜色

【讨论】：

显然 grep 在没有匹配项时有一个非零退出代码。如果你想在 NPM 脚本中使用它，请使用 npx webpack --color | grep -v '^ at ' || true（当然还有你需要的任何其他参数，只需注意 || true）。

【解决方案2】：

如果您是 running webpack via the API（例如来自 gulpfile），您可以使用以下单行代码过滤异常消息：

// filter webpack/babel error traces
const filterStackTraces = err =>
  err.toString().split(/[\r\n]+/).filter(line => ! line.match(/^\s+at Parser/)).join(os.EOL);

// example use:
compiler.run( (err, stats) => {
  if (err) return done( new gutil.PluginError('webpack', err));
  if ( stats.hasErrors() ) {
    const statDetails = stats.toJson({errorDetails: false});
    // print out parse errors
    statDetails.errors.forEach((e) => gutil.log(error(tag), filterStackTraces(e)));
    return done(new gutil.PluginError('webpack', 'Parse/ build error(s)'));
  }
  gutil.log(gutil.colors.green(tag), stats.toString({colors: true}));
  done();
});

它会在不触及错误消息和源上下文 sn-p 的情况下删除堆栈跟踪，并保持颜色不变。

【讨论】：