Webpack插件错误管理

9
本文的主要目标是在编写Webpack插件时获取有关错误/警告管理的额外信息。
我在Webpack插件文档中看到,在基于时间的插件接口(回调函数中)中可以传递一个err参数,但是没有进一步解释它如何影响Webpack生命周期、构建过程以及如何使用它。它也没有说明是否有一种方法来使用其他类型的插件接口来管理错误。
无论如何,作为第一次尝试,在'emit'生命周期步骤中,我尝试将err参数传递给new Error('An error has occurred')或者简单地传递'An error has occured'值,但是在任何一种情况下,它都会在控制台中显示给定的err参数(即使没有特定的错误颜色),并且webpack-dev-server会卡住:
  function WpAggregationPlugin() {
    this.startTime = Date.now();
    this.prevTimestamps = {};
  }

  WpAggregationPlugin.prototype.apply = function(compiler) {
    compiler.plugin( 'emit', (compilation, callback) => {

      var changedFiles = Object.keys(compilation.fileTimestamps).filter( watchfile => 
        this.prevTimestamps[watchfile] &&
        (this.prevTimestamps[watchfile] < (compilation.fileTimestamps[watchfile] || Infinity)) )

      // compilation.errors.push(new Error('...'))

      this.prevTimestamps = compilation.fileTimestamps;

      if( changedFiles.length <= 0 ) {
        callback()
      } else {
        process.stdout.write( `File modification detected :\n${JSON.stringify(changedFiles, null, 4)}\n` )
        callback( '...' )
      }
    } );
  };

  module.exports = WpAggregationPlugin;

所以需要通过以下方式进行额外的回调调用,以便恢复Webpack构建过程:
  ...
      if( changedFiles.length <= 0 ) {
        callback()
      } else {
        process.stdout.write( `File modification detected :\n${JSON.stringify(changedFiles, null, 4)}\n` )
        callback( '...' )
        callback()       // EXTRA CALL
      }
  ...

很不幸,以这种方式,我只是简单地在标准输出中显示未着色的字符串,而没有以任何方式影响Webpack生命周期。
我试图实现的是,在出错情况下,显示红色错误消息,并防止束构建过程以“valid”状态结束,直到新的构建最终运行我的插件而无错误为止。
关于警告管理,我想必须通过直接在插件本身中使用正确着色调用process.stdout.write()或将某些警告集合提供给编译参数来执行...但与我在此SO问题中报告的内容类似...只是猜测:p 值得一提的是,我提出这个问题是因为我编写了一个微小的构建工具,其目标是聚合应用程序中散布的所有翻译,以便我们的客户只需处理单个翻译文件而不是数十个。
它可以在“一次性”模式或监视模式下运行,但我想最好直接将其作为插件集成到Webpack构建过程中。

所以,如果你对这个“架构”选择有任何看法,请随意分享,因为我作为Webpack的新手,肯定没有完全掌握它的全部潜力,可能会误导人们关于它可以/应该做什么(当然这只是附注,因为这不是本文的主要原因;)

提前感谢您对此的建议和技巧;)!

2个回答

19
经过半天的webpack代码调试,我终于把问题解决了。
关键是要以这种方式向webpack编译的错误收集器添加错误信息: compilation.errors.push( new Error( 'explain why the build failed' ) ) 无论你的插件是否失败,都不要忘记回调callback()errors.push会:
  • 阻止webpack-dev-server处理捆绑包
  • 使错误消息在stdout上以红色显示
  • 在客户端/浏览器端的webpack头部报告错误消息...而不是你的应用程序!!! (如果你当然通过http://yourDN:yourPort/webpack-dev-server访问它)
最后一点非常完美,可以强制开发人员在继续编码之前修复错误;)
可惜webpack文档太烂了......我绝对希望Webpack 2没有这些令人困惑的文档缺陷。

你可以验证自己的答案。;-) - Paleo

0

我目前正在编写一个Webpack插件,遇到了同样的问题。我尝试查看一些现有的插件作为参考,但得出了与您相同的结论:没有基础设施支持这个功能。以extract-text-webpack-plugin为例:

https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/master/index.js

它基本上使用console.warnthrow new Error来处理事情。您可以将错误推送到compilation对象中,但我不知道如何处理它,而且有些入口点显然无法使用该方法。

我终于解决了这个问题:真正的解决方法是 compilation.errors.push( new Error( 'explain why the build failed' ) ),当然不要忘记无论插件是否失败都要调用 callback()。这个 errors.push 将防止 webpack-dev-server 处理捆绑包,在命令行上以红色显示,并且如果您通过 http://yourDN:yourPort/webpac-dev-server 访问应用程序,则会在 webpack 标头部分报告此错误。非常适合强制开发人员在进一步编码之前修复错误 ;) - Lemmy

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接