Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ElemeFE/obsolete-webpack-plugin
🌈 A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on `Browserslist` and prompts website users to upgrade it.
https://github.com/ElemeFE/obsolete-webpack-plugin
browser browser-update browserslist compatibility obsolete outdated webpack webpack-plugin
Last synced: 3 months ago
JSON representation
🌈 A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on `Browserslist` and prompts website users to upgrade it.
- Host: GitHub
- URL: https://github.com/ElemeFE/obsolete-webpack-plugin
- Owner: ElemeFE
- License: mit
- Created: 2018-12-13T07:31:54.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-29T08:05:20.000Z (over 4 years ago)
- Last Synced: 2024-07-22T06:37:51.466Z (3 months ago)
- Topics: browser, browser-update, browserslist, compatibility, obsolete, outdated, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 311 KB
- Stars: 185
- Watchers: 9
- Forks: 14
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Obsolete Webpack Plugin
[](https://circleci.com/gh/ElemeFE/obsolete-webpack-plugin) [](https://ci.appveyor.com/project/chikara-chan/obsolete-webpack-plugin) [](https://codecov.io/github/ElemeFE/obsolete-webpack-plugin) [](https://npmjs.com/package/obsolete-webpack-plugin) [](https://nodejs.org) [](https://unpkg.com/obsolete-web/dist/obsolete.min.js) [](https://gitlab.alibaba-inc.com/eleme-fe-lpd/obsolete-webpack-plugin/blob/master/LICENSE)
## Introduction :star2:
A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on [Browserslist](https://github.com/browserslist/browserslist) and prompts website users to upgrade it.
## Motivation :collision:
In modern front-end development, we use toolchain to convert next JavaScript version into a backwards compatible version of JavaScript that works in older browser environment. For next syntax features, such as [Object Rest/Spread Properties](https://tc39.github.io/proposal-object-rest-spread/), [Exponentiation Operator](http://rwaldron.github.io/exponentiation-operator/), we can transform all of them through [AST](https://astexplorer.net/) parser. For next built-in features, such as [Promise](https://tc39.github.io/ecma262/#sec-promise-objects), [WeakMap](https://tc39.github.io/ecma262/#sec-weakmap-objects), [String.prototype.padstart](https://tc39.github.io/ecma262/#sec-string.prototype.padstart), we can provide pollyfills that mimic native functionality. However, for some browser only features, such as [Service Worker](https://w3c.github.io/ServiceWorker/), [WebAssembly](https://webassembly.github.io/spec/js-api/), [CSS Grid Layout](https://drafts.csswg.org/css-grid/), no polyfills support these or partially support. In the worst case, our users who use old browsers open a website but catch a sight of blank page. It may be a bad network condition, may be syntax parsing error, may be built-in losing. But they must not realize that the browser they using does not meet the requirements of our website target. Therefore, we need a mechanism to notify that they should upgrade their browser before accessing content. Thus, this plugin borns.
## Getting Started :zap:
### Prerequisite
- Node >=8.3.0
- Webpack 4.x
### Installation
```sh
$ npm i -D obsolete-webpack-plugin
```
### Basic Usage
Apply the plugin in your Webpack configuration, often used together with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin). By the way, the putting order of plugins is irrelevant.
```js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ObsoleteWebpackPlugin = require('obsolete-webpack-plugin');
module.exports = {
// ...
plugins: [
// ...
new HtmlWebpackPlugin(),
new ObsoleteWebpackPlugin()
]
};
```
### Best Practice
To improve first page load speed, you should always reduce render-blocking scripts as far as possible. For non-critical script, it's best to mark them with the `async` attribute. Thanks to [script-ext-html-webpack-plugin](https://github.com/numical/script-ext-html-webpack-plugin), we are able to fulfill this goal easily.
```js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ObsoleteWebpackPlugin = require('obsolete-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin(),
new ObsoleteWebpackPlugin({
name: 'obsolete'
}),
new ScriptExtHtmlWebpackPlugin({
async: 'obsolete'
})
]
};
```
## Configuration :book:
### Options
| Name | Type | Default | Description
| :-: | :-: | :-: | :-:
| name | string | `'obsolete'` | The chunk name.
| template | string | `'
Your browser is not supported. ×'` | The prompt html template. It accepts any document fragment. E.g., `'.........'`. Specially, the template will be removed when a node with attribute `id="obsoleteClose"` is clicked.
| position | string | `'afterbegin'` | If set `'afterbegin'`, the template will be injected into the start of body.
If set `'beforeend'`, the template will be injected into the end of body.
| browsers | string[] | | Browsers to support, overriding global browserslist configuration.
| promptOnNonTargetBrowser | boolean | `false` | If the current browser useragent doesn't match one of the target browsers, it's considered as unsupported. Thus, the prompt will be shown. E.g., your browserslist configuration is `ie > 8`, by default, the prompt won't be shown on Chrome or Safari browser. E.g., your browserslist configuration is `ie > 8`, by default, the prompt won't be shown on Chrome or other browsers. Another e.g., your browserslist configuration is `chrome > 80`, by default, the prompt won't be shown on IE or other browsers.
| promptOnUnknownBrowser | boolean | `true` | If the current browser useragent is unknown, the prompt will be shown.
## Demonstration :art:
## Browser Support :eyeglasses:
The name matches Browserslist queries.
### Desktop
IE | Edge | Chrome | Safari | Firefox | Opera | Electron
:-: | :-: | :-: | :-: | :-: | :-: | :-:
 |  |  |  |  |  | 
### Mobile
ChromeAndroid | Android
(5+, WebView) | iOS
(OS)
:-: | :-: | :-:
 |  | 
## FAQ :tea:
Q: Does this plugin support Yandex, Maxthon, UC or QQ browser?
A: Yep. This plugin supports those browsers based on the mainstream browser kernel, such as Chromium based browser, Mozilla based browser. In other words, `Chrome >= 30` will be also applied to Yandex browser, `ChromeAndroid >= 30` will be also applied to Android UC browser.
Q: Does plugin work in IE 6?
A: Yep. This plugin supports browsers that implement the full [ES3 spec](https://www-archive.mozilla.org/js/language/E262-3.pdf). Although the source code is ES2015+, it will be compiled and shimmed to the target environment eventually.