├── README.md ├── index.js └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # webpack-error-notification 2 | 3 | [Webpack](http://webpack.github.io/) plugin that uses system notifications to 4 | notify user about compilation error. Will also notify you about first successful 5 | build after errors, but will not spam you about each good run. 6 | 7 | Displays notification for the first run anyway, so you can fire up webpack 8 | watcher and move on, and you will know when the first long compilation is done, 9 | either good or bad. 10 | 11 | ## Installation 12 | 13 | You can easily install this plugin to your project: 14 | 15 | ``` 16 | npm install --save-dev webpack-error-notification 17 | ``` 18 | 19 | On Linux you can have multiple notification tools, it seems the most popular is 20 | `notify-send`. Check if it's installed, and if you don't have it, on Ubuntu 21 | you can install it with `apt-get install libnotify-bin`. 22 | 23 | For Mac OS (10.8+) you need to install 24 | [terminal-notifier](https://github.com/alloy/terminal-notifier), the easy way is 25 | to use [Homebrew](http://brew.sh/): 26 | 27 | ``` 28 | brew install terminal-notifier 29 | ``` 30 | 31 | For your preferred operating system you should have/install some command-line 32 | tool that can display notification and read below. 33 | 34 | ## Usage 35 | 36 | In config file: 37 | 38 | ``` javascript 39 | var WebpackErrorNotificationPlugin = require('webpack-error-notification'); 40 | 41 | // ... 42 | module: { 43 | plugins: [ 44 | new WebpackErrorNotificationPlugin(/* strategy */, /* options */), 45 | ] 46 | }, 47 | // ... 48 | ``` 49 | 50 | You can supply some strategy for the plugin to display notification. If you 51 | don't supply anything, it will use `process.platform` as a strategy 52 | name. `'darwin'` and `'linux'` are supported out of the box now. 53 | 54 | You can also supply `function(msg) {}` as a strategy that will use your 55 | notification CLI tool of choice. 56 | 57 | Main idea here is that, preferrably, people on your team shouldn't have to 58 | customize webpack config to be able to see notifications. 59 | 60 | If you do not want to notify warnings, you can provide `{ notifyWarnings: false }` as options. 61 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var execFile = require('child_process').execFile; 2 | 3 | 4 | var STRATEGIES = { 5 | 'darwin': function(msg) { 6 | msg = escapeColors(msg); 7 | execFile('terminal-notifier', ['-title', 'Webpack', '-message', msg]); 8 | }, 9 | 'linux': function(msg) { 10 | msg = escapeColors(msg); 11 | msg = escapeHtml(msg); 12 | execFile('notify-send', ['Webpack', msg]); 13 | } 14 | }; 15 | 16 | function escapeColors(msg) { 17 | return msg.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, ""); 18 | } 19 | 20 | function escapeHtml(unsafe) { 21 | return unsafe 22 | .replace(/&/g, "&") 23 | .replace(//g, ">") 25 | .replace(/"/g, """) 26 | .replace(/'/g, "'"); 27 | } 28 | 29 | function WebpackErrorNotificationPlugin(strategy, opts) { 30 | this.lastBuildSucceeded = false; 31 | this.notifier = null; 32 | this.opts = opts || { notifyWarnings: true }; 33 | 34 | if (typeof strategy === 'function') { 35 | this.notifier = strategy; 36 | return; 37 | } 38 | 39 | if (typeof strategy === 'undefined') { 40 | strategy = process.platform; 41 | } 42 | 43 | if (STRATEGIES.hasOwnProperty(strategy)) { 44 | this.notifier = STRATEGIES[strategy]; 45 | } 46 | }; 47 | 48 | 49 | WebpackErrorNotificationPlugin.prototype.compileMessage = function(stats) { 50 | var error; 51 | if (stats.hasWarnings() && 52 | this.opts.notifyWarnings) { 53 | error = stats.compilation.warnings[0]; 54 | } 55 | if (stats.hasErrors()) { 56 | error = stats.compilation.errors[0]; 57 | } 58 | 59 | if (error) { 60 | try { 61 | this.lastBuildSucceeded = false; 62 | return error.module.rawRequest + '\n' + error.error.toString(); 63 | } catch (e) { 64 | return "Unknown error or warning"; 65 | } 66 | } 67 | 68 | if (!this.lastBuildSucceeded) { 69 | this.lastBuildSucceeded = true; 70 | return 'Successful build'; 71 | } 72 | }; 73 | 74 | 75 | WebpackErrorNotificationPlugin.prototype.compilationDone = function(stats) { 76 | var msg = this.compileMessage(stats); 77 | if (msg) { 78 | this.notifier(msg); 79 | } 80 | }; 81 | 82 | 83 | WebpackErrorNotificationPlugin.prototype.apply = function(compiler) { 84 | if (this.notifier === null) { 85 | console.log('Failed to set error notification.'); 86 | } else { 87 | if (typeof compiler.hooks === 'undefined') { 88 | // Backwards-compatible for pre webpack-4 89 | compiler.plugin('done', this.compilationDone.bind(this)); 90 | } else { 91 | compiler.hooks.done.tap("webpack-error-notification", this.compilationDone.bind(this)) 92 | } 93 | } 94 | }; 95 | 96 | 97 | module.exports = WebpackErrorNotificationPlugin; 98 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-error-notification", 3 | "version": "0.1.8", 4 | "description": "Use system notification to inform developer about compilation error", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "peerDependencies": { 10 | "webpack": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0" 11 | }, 12 | "keywords": [ 13 | "webpack", 14 | "build" 15 | ], 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/vsolovyov/webpack-error-notification.git" 19 | }, 20 | "author": "Vsevolod Solovyov", 21 | "license": "ISC" 22 | } 23 | --------------------------------------------------------------------------------