first commit
This commit is contained in:
162
app_vue/node_modules/@soda/friendly-errors-webpack-plugin/README.md
generated
vendored
Normal file
162
app_vue/node_modules/@soda/friendly-errors-webpack-plugin/README.md
generated
vendored
Normal file
@ -0,0 +1,162 @@
|
||||
# Friendly-errors-webpack-plugin
|
||||
|
||||
[](https://www.npmjs.com/package/@soda/friendly-errors-webpack-plugin)
|
||||
[](https://travis-ci.org/sodatea/friendly-errors-webpack-plugin)
|
||||
[](https://ci.appveyor.com/project/sodatea/friendly-errors-webpack-plugin/branch/master)
|
||||
|
||||
Friendly-errors-webpack-plugin recognizes certain classes of webpack
|
||||
errors and cleans, aggregates and prioritizes them to provide a better
|
||||
Developer Experience.
|
||||
|
||||
It is easy to add types of errors so if you would like to see more
|
||||
errors get handled, please open a [PR](https://help.github.com/articles/creating-a-pull-request/)!
|
||||
|
||||
## Getting started
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
npm install @soda/friendly-errors-webpack-plugin --save-dev
|
||||
```
|
||||
|
||||
### Basic usage
|
||||
|
||||
Simply add `FriendlyErrorsWebpackPlugin` to the plugin section in your Webpack config.
|
||||
|
||||
```javascript
|
||||
var FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
|
||||
|
||||
var webpackConfig = {
|
||||
// ...
|
||||
plugins: [
|
||||
new FriendlyErrorsWebpackPlugin(),
|
||||
],
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
### Turn off errors
|
||||
|
||||
You need to turn off all error logging by setting your webpack config quiet option to true.
|
||||
|
||||
```javascript
|
||||
app.use(require('webpack-dev-middleware')(compiler, {
|
||||
// ...
|
||||
logLevel: 'silent',
|
||||
// ...
|
||||
}));
|
||||
```
|
||||
|
||||
If you use the webpack-dev-server, there is a setting in webpack's ```devServer``` options:
|
||||
|
||||
```javascript
|
||||
// webpack config root
|
||||
{
|
||||
// ...
|
||||
devServer: {
|
||||
// ...
|
||||
quiet: true,
|
||||
// ...
|
||||
},
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
If you use webpack-hot-middleware, that is done by setting the log option to `false`. You can do something sort of like this, depending upon your setup:
|
||||
|
||||
```javascript
|
||||
app.use(require('webpack-hot-middleware')(compiler, {
|
||||
log: false
|
||||
}));
|
||||
```
|
||||
|
||||
_Thanks to [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard) for this piece of info._
|
||||
|
||||
## Demo
|
||||
|
||||
### Build success
|
||||
|
||||

|
||||
|
||||
### eslint-loader errors
|
||||
|
||||

|
||||
|
||||
### babel-loader syntax errors
|
||||
|
||||

|
||||
|
||||
### Module not found
|
||||
|
||||

|
||||
|
||||
## Options
|
||||
|
||||
You can pass options to the plugin:
|
||||
|
||||
```js
|
||||
new FriendlyErrorsPlugin({
|
||||
compilationSuccessInfo: {
|
||||
messages: ['You application is running here http://localhost:3000'],
|
||||
notes: ['Some additional notes to be displayed upon successful compilation']
|
||||
},
|
||||
onErrors: function (severity, errors) {
|
||||
// You can listen to errors transformed and prioritized by the plugin
|
||||
// severity can be 'error' or 'warning'
|
||||
},
|
||||
// should the console be cleared between each compilation?
|
||||
// default is true
|
||||
clearConsole: true,
|
||||
|
||||
// add formatters and transformers (see below)
|
||||
additionalFormatters: [],
|
||||
additionalTransformers: []
|
||||
})
|
||||
```
|
||||
|
||||
## Adding desktop notifications
|
||||
|
||||
The plugin has no native support for desktop notifications but it is easy
|
||||
to add them thanks to [node-notifier](https://www.npmjs.com/package/node-notifier) for instance.
|
||||
|
||||
```js
|
||||
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
|
||||
var notifier = require('node-notifier');
|
||||
var ICON = path.join(__dirname, 'icon.png');
|
||||
|
||||
new FriendlyErrorsPlugin({
|
||||
onErrors: (severity, errors) => {
|
||||
if (severity !== 'error') {
|
||||
return;
|
||||
}
|
||||
const error = errors[0];
|
||||
notifier.notify({
|
||||
title: "Webpack error",
|
||||
message: severity + ': ' + error.name,
|
||||
subtitle: error.file || '',
|
||||
icon: ICON
|
||||
});
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Transformers and formatters
|
||||
|
||||
Webpack's errors processing, is done in four phases:
|
||||
|
||||
1. Extract relevant info from webpack errors. This is done by the plugin [here](https://github.com/sodatea/friendly-errors-webpack-plugin/blob/master/src/core/extractWebpackError.js)
|
||||
2. Apply transformers to all errors to identify and annotate well know errors and give them a priority
|
||||
3. Get only top priority error or top priority warnings if no errors are thrown
|
||||
4. Apply formatters to all annotated errors
|
||||
|
||||
You can add transformers and formatters. Please see [transformErrors](https://github.com/sodatea/friendly-errors-webpack-plugin/blob/master/src/core/transformErrors.js),
|
||||
and [formatErrors](https://github.com/sodatea/friendly-errors-webpack-plugin/blob/master/src/core/formatErrors.js)
|
||||
in the source code and take a look a the [default transformers](https://github.com/sodatea/friendly-errors-webpack-plugin/tree/master/src/transformers)
|
||||
and the [default formatters](https://github.com/sodatea/friendly-errors-webpack-plugin/tree/master/src/formatters).
|
||||
|
||||
## TODO
|
||||
|
||||
- [x] Make it compatible with node 4
|
||||
|
Reference in New Issue
Block a user