本文的主要目标是在编写Webpack插件时获取有关错误/警告管理的额外信息。
我在Webpack插件文档中看到,在基于时间的插件接口(回调函数中)中可以传递一个
无论如何,作为第一次尝试,在
所以需要通过以下方式进行额外的回调调用,以便恢复Webpack构建过程:
很不幸,以这种方式,我只是简单地在标准输出中显示未着色的字符串,而没有以任何方式影响Webpack生命周期。
我试图实现的是,在出错情况下,显示红色错误消息,并防止束构建过程以“valid”状态结束,直到新的构建最终运行我的插件而无错误为止。
关于警告管理,我想必须通过直接在插件本身中使用正确着色调用process.stdout.write()或将某些警告集合提供给编译参数来执行...但与我在此SO问题中报告的内容类似...只是猜测:p 值得一提的是,我提出这个问题是因为我编写了一个微小的构建工具,其目标是聚合应用程序中散布的所有翻译,以便我们的客户只需处理单个翻译文件而不是数十个。
它可以在“一次性”模式或监视模式下运行,但我想最好直接将其作为插件集成到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的新手,肯定没有完全掌握它的全部潜力,可能会误导人们关于它可以/应该做什么(当然这只是附注,因为这不是本文的主要原因;)
提前感谢您对此的建议和技巧;)!