README
Polyfillr
polyfillr
is a minimalist function to dynamically load polyfills before start your application. The function is inspired by Anuj Nair about the conditionally load of multiple Polyfills using Webpack
Installation
The plugin is available as the polyfillr
package name on npm and Github.
npm i --save-dev polyfillr
yarn add --dev polyfillr
Environment
polyfillr
was built for Node.js >=8.11.2
.
Usage
Webpack need __webpack_public_path__
variable to find the path to dynamically load files. More information in the Webpack documentation.
Load polyfill from node modules
The following example load Array.from
polyfill from core-js
node modules with dynamic import.
const polyfillr = require('polyfillr');
polyfillr({
polyfills: [
{
name: 'Array.from',
test: typeof Array.from !== 'function',
load: () => {
return import('core-js/es/array/from')
}
}
]
});
Callback function when polyfills loaded
The following example load Array.from
polyfill from core-js
node modules with dynamic import and executed the callback function.
const polyfillr = require('polyfillr');
polyfillr({
polyfills: [
{
name: 'Array.from',
test: typeof Array.from !== 'function',
load: () => {
return import('core-js/es/array/from');
}
}
],
callback: () => {
console.log('Polyfill loaded');
}
});
Webpack magic comments
The following example load Array.from
polyfill from core-js
node modules with dynamic import and add Webpack chunk name polyfill.array-from
for the loaded polyfill file.
More information about Webpack magic comments.
const polyfillr = require('polyfillr');
polyfillr({
polyfills: [
{
name: 'Array.from',
test: typeof Array.from !== 'function',
load: () => {
return import(/* webpackChunkName: "polyfill.array-from" */ 'core-js/es/array/from');
}
}
]
});
Load polyfill from local file
The following example load HTMLPictureElement
polyfill from ./polyfills
project directory with dynamic import.
const polyfillr = require('polyfillr');
polyfillr({
polyfills: [
{
name: 'HTMLPictureElement',
test: typeof window.HTMLPictureElement !== 'function',
load: () => {
return import('./polyfills/picturefill.min.js');
}
}
]
});
Multiple polyfills load
The following example load HTMLPictureElement
polyfill from ./polyfills
project directory and Array.from
polyfill from core-js
node modules with dynamic import.
const polyfillr = require('polyfillr');
polyfillr({
polyfills: [
{
name: 'HTMLPictureElement',
test: typeof window.HTMLPictureElement !== 'function',
load: () => {
return import('./polyfills/picturefill.min.js');
}
},
{
name: 'Array.from',
test: typeof Array.from !== 'function',
load: () => {
return import('core-js/es/array/from');
}
}
]
});
Debug mode
The following example load Array.from
polyfill from core-js
node modules with dynamic import and enables debug log in the browser devtools.
const polyfillr = require('polyfillr');
polyfillr({
polyfills: [
{
name: 'Array.from',
test: typeof Array.from !== 'function',
load: () => {
return import('core-js/es/array/from');
}
}
],
debug: true
});
Parameters
polyfills
Array
Tells to the function the list of polyfills to load. The polyfills
array accept configurations of polyfills with an object with three parameters:
name
String
The name of the polyfill.
test
Boolean
The test to see if we need to download the polyfill to the browser.
load
Function
The function to executes to dynamically import the polyfill file.
callback
Function = () => {}
Tells the optional function to execute when all polyfills are loaded.
debug
Boolean = false
Tells to the function to enable the debug mode. Log messages will be displayed in the browser devtools for every polyfill files load.
Licence
polyfillr
is licensed under the MIT License.
Created with ♥ by @yoriiis.