{"id":13826913,"url":"https://github.com/ElemeFE/obsolete-webpack-plugin","last_synced_at":"2025-07-09T02:32:46.464Z","repository":{"id":41160105,"uuid":"161600801","full_name":"ElemeFE/obsolete-webpack-plugin","owner":"ElemeFE","description":"🌈 A Webpack plugin generates a browser-side standalone script that detects browser compatibility based on `Browserslist` and prompts website users to upgrade it.","archived":false,"fork":false,"pushed_at":"2020-04-29T08:05:20.000Z","size":318,"stargazers_count":185,"open_issues_count":5,"forks_count":14,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-08-05T09:15:50.756Z","etag":null,"topics":["browser","browser-update","browserslist","compatibility","obsolete","outdated","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ElemeFE.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-13T07:31:54.000Z","updated_at":"2024-05-29T00:20:33.000Z","dependencies_parsed_at":"2022-08-25T17:22:55.484Z","dependency_job_id":null,"html_url":"https://github.com/ElemeFE/obsolete-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fobsolete-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fobsolete-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fobsolete-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fobsolete-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElemeFE","download_url":"https://codeload.github.com/ElemeFE/obsolete-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225481052,"owners_count":17481141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","browser-update","browserslist","compatibility","obsolete","outdated","webpack","webpack-plugin"],"created_at":"2024-08-04T09:01:46.657Z","updated_at":"2024-11-20T06:30:35.345Z","avatar_url":"https://github.com/ElemeFE.png","language":"JavaScript","readme":"# Obsolete Webpack Plugin\n\n[![npm](https://img.shields.io/circleci/project/github/ElemeFE/obsolete-webpack-plugin.svg)](https://circleci.com/gh/ElemeFE/obsolete-webpack-plugin) [![npm](https://ci.appveyor.com/api/projects/status/github/ElemeFE/obsolete-webpack-plugin?svg=true)](https://ci.appveyor.com/project/chikara-chan/obsolete-webpack-plugin) [![npm](https://img.shields.io/codecov/c/github/ElemeFE/obsolete-webpack-plugin.svg)](https://codecov.io/github/ElemeFE/obsolete-webpack-plugin) [![npm](https://img.shields.io/npm/v/obsolete-webpack-plugin.svg)](https://npmjs.com/package/obsolete-webpack-plugin) [![node](https://img.shields.io/node/v/obsolete-webpack-plugin.svg)](https://nodejs.org) [![npm](https://img.badgesize.io/https://unpkg.com/obsolete-web/dist/obsolete.min.js?compression=gzip)](https://unpkg.com/obsolete-web/dist/obsolete.min.js) [![licenses](https://img.shields.io/npm/l/obsolete-webpack-plugin.svg)](https://gitlab.alibaba-inc.com/eleme-fe-lpd/obsolete-webpack-plugin/blob/master/LICENSE)\n\n## Introduction :star2:\n\nA 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.\n\n## Motivation :collision:\n\nIn 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.\n\n## Getting Started :zap:\n\n### Prerequisite\n\n- Node \u003e=8.3.0\n- Webpack 4.x\n\n### Installation\n\n```sh\n$ npm i -D obsolete-webpack-plugin\n```\n\n### Basic Usage\n\nApply 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.\n\n```js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ObsoleteWebpackPlugin = require('obsolete-webpack-plugin');\n\nmodule.exports = {\n  // ...\n  plugins: [\n    // ...\n    new HtmlWebpackPlugin(),\n    new ObsoleteWebpackPlugin()\n  ]\n};\n```\n\n### Best Practice\n\nTo 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.\n\n```js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ObsoleteWebpackPlugin = require('obsolete-webpack-plugin');\nconst ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');\n\nmodule.exports = {\n  // ...\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new ObsoleteWebpackPlugin({\n      name: 'obsolete'\n    }),\n    new ScriptExtHtmlWebpackPlugin({\n      async: 'obsolete'\n    })\n  ]\n};\n```\n\n## Configuration :book:\n\n### Options\n\n| Name | Type | Default | Description\n| :-: | :-: | :-: | :-:\n| name | string | `'obsolete'` | The chunk name.\n| template | string | `'\u003cdiv\u003eYour browser is not supported. \u003cbutton id=\"obsoleteClose\"\u003e\u0026times;\u003c/button\u003e\u003c/div\u003e'` | The prompt html template. It accepts any document fragment. E.g., `'\u003cstyle\u003e...\u003c/style\u003e\u003cdiv\u003e...\u003c/div\u003e\u003cscript\u003e...\u003c/script\u003e'`. Specially, the template will be removed when a node with attribute `id=\"obsoleteClose\"` is clicked.\n| position | string | `'afterbegin'` | If set `'afterbegin'`, the template will be injected into the start of body. \u003cbr\u003eIf set `'beforeend'`, the template will be injected into the end of body.\n| browsers | string[] | | Browsers to support, overriding global browserslist configuration.\n| 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 \u003e 8`, by default, the prompt won't be shown on Chrome or Safari browser. E.g., your browserslist configuration is `ie \u003e 8`, by default, the prompt won't be shown on Chrome or other browsers. Another e.g., your browserslist configuration is `chrome \u003e 80`, by default, the prompt won't be shown on IE or other browsers.\n| promptOnUnknownBrowser | boolean | `true` | If the current browser useragent is unknown, the prompt will be shown.\n\n## Demonstration :art:\n\n![](https://fuss10.elemecdn.com/c/ee/57a564fb6b64c7cf8cf3ac37293c9gif.gif)\n\n## Browser Support :eyeglasses:\n\nThe name matches Browserslist queries.\n\n### Desktop\n\nIE | Edge | Chrome | Safari | Firefox | Opera | Electron \n:-: | :-: | :-: | :-: | :-: | :-: | :-:\n![](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/archive/internet-explorer_9-11/internet-explorer_9-11_64x64.png) | ![](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/edge/edge_64x64.png) | ![](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/chrome/chrome_64x64.png) | ![](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/safari/safari_64x64.png) | ![](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/firefox/firefox_64x64.png) | ![](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/opera/opera_64x64.png) | ![](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/electron/electron_64x64.png)\n\n### Mobile\n\nChromeAndroid | Android\u003cbr\u003e(5+, WebView) | iOS\u003cbr\u003e(OS)\n:-: | :-: | :-:\n![](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/chrome/chrome_64x64.png) | ![](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/android-webview-beta/android-webview-beta_64x64.png) | ![](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/safari-ios/safari-ios_64x64.png)\n\n## FAQ :tea:\n\nQ: Does this plugin support Yandex, Maxthon, UC or QQ browser?\n\nA: Yep. This plugin supports those browsers based on the mainstream browser kernel, such as Chromium based browser, Mozilla based browser. In other words, `Chrome \u003e= 30` will be also applied to Yandex browser, `ChromeAndroid \u003e= 30` will be also applied to Android UC browser.\n\nQ: Does plugin work in IE 6?\n\nA: 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.\n\n\u003c!-- ## External Links :anchor: --\u003e\n","funding_links":[],"categories":["JavaScript","Webpack"],"sub_categories":["调试"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElemeFE%2Fobsolete-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FElemeFE%2Fobsolete-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElemeFE%2Fobsolete-webpack-plugin/lists"}