Webpack插件錯誤管理

本文的主要目標是在編寫Webpack插件時獲取有關錯誤/警告管理的額外信息。Webpack插件錯誤管理

我在Webpack plug-in documentation中看到有可能將err參數傳遞給基於時序的插件接口（在回調中），但沒有關於它如何影響Webpack生命週期的內容的進一步解釋，它的構建過程以及如何使用它。它沒有解釋是否有辦法通過其他類型的插件接口來管理錯誤。

反正作爲第一次嘗試，在'emit'生命週期的一步，我已經試過要麼傳遞給err參數new Error('An error has occurred')或只是一個'An error has occured'值，但在任何情況下，它確實顯示給定的ERR參數中控制檯是（IE可悲的是沒有任何錯誤的具體着色），和的WebPack西弗服務器卡住了：

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的新手，我絕對不會擁抱它的全部潛力，我可能會根據什麼可以/應該做到這一點（作爲一個側面說明，當然，因爲它不是這篇文章的主要原因;）

在此先感謝您的提示和技巧;）！

來源

2017-02-21 Lemmy

我目前正在寫一個Webpack插件，並遇到同樣的問題。我試着尋找一些現有的插件作爲參考，但是得出了和你一樣的結論：沒有這方面的基礎設施。以提取文本-的WebPack-插件爲例：

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

它主要採用console.warn和throw new Error處理的東西。您可以將錯誤推送到compilation對象，但我不知道如何處理這些對象，顯然這對某些入口點不可用。

來源

2017-03-02 20:34:26 saboya

我終於整理出來了：真正的交易是編譯.errors.push（new Error（'解釋爲什麼構建失敗'））''，當然不要忘了'callback（）'不管你的插件是否失敗。這個'errors.push'將會阻止webpack-dev-server處理這些包，並且會在命令行中顯示爲紅色，如果你通過'http：// yourDN：yourPort訪問你的應用/ webpac-dev-server'，你會在webpack頭部分的客戶端報告這個錯誤。在編碼之前強制你的開發人員修復錯誤;） – Lemmy

我終於在webpack代碼調試半天后把它整理出來了。

真正的交易是這樣喂的WebPack編譯的錯誤收集：

compilation.errors.push(new Error('explain why the build failed'))

當然不要忘了callback()無論你的插件失敗與否。

這errors.push將：

防止的WebPack-dev的服務器來處理捆綁
對標準輸出
有在的WebPack頭報告的錯誤消息以紅色顯示錯誤消息部分在客戶端/瀏覽器端...而不是你的應用程序！（如果你訪問它直通當然http://yourDN:yourPort/webpack-dev-server）

最新的觀點是恰到好處地執行你的開發者恢復有編碼會議之前解決存在錯誤;）

只是可惜的WebPack文檔可真差勁...我絕對希望Webpack 2不會有那些令人費解的doc缺陷：p

來源

2017-03-05 12:19:29 Lemmy

Webpack插件錯誤管理

回答

相關問題