obsolete-webpack-plugin
obsolete-webpack-plugin copied to clipboard
Feature: provide target browser to html template
Right now we can redefine html-template that showed for unsupported browsers via ```template`` option which is a string. But this is not convenient.
Better if it will be not only string but function also that provides list of supported browsers... So we can create html-template and show to a user all supported browsers.
For example right now I use the following: webpack.config.js
const fs = require("fs");
const browserlist = fs.readFileSync("./.browserslistrc", "utf8");
const browserlistUri = browserlist
.replace(/\r/g, "%2C")
.replace(/\s/g, "+")
.replace(/=/g, "%3D");
const ObsoleteTemplate = fs
.readFileSync("./src/obsoleteBrowser.html", "utf8")
.replace("{list}", browserlistUri);
...
new ObsoleteWebpackPlugin({
// it creates alert-script for not-supported browsers according to .browserlistrc
name: "obsolete",
promptOnNonTargetBrowser: true,
template: ObsoleteTemplate
}),
...
obsoleteBrowser.html
<div class="obsolete">
<style>
...
</style>
<h4>Your browser is not supported (or older than required).</h4>
<h5>
It does not mean that site does not work but there are no guarantees that all will work fine.</br>
All supported browsers you can find <a href="https://browserl.ist/?q={list}" target="_blank">here</a>
</h5>
<button id="obsoleteClose">×</button>
</div>
So you how you can see I implemented splitted html file and also js logic for reading .browserlistrc, *.html, parsing and preparing this to template. This is doesn't convenient a looks ugly. At the same time HtmlWebpackPlugin uses template
as path-to-template option and I can use the global variables from the webpack inside such template.
My suggestion is:
- add
templatePath
option - add some definition so you can get array of browsers into *.html
- update
template
option tostring | function(listBrowsers)
types
It will be fine if the configuring of this is more flexible.