Registry / http-networking / polyfill-bundler

polyfill-bundler

JSON →
library1.0.126jsnpmunverified

Polyfill Bundler is a JavaScript utility package that enables the creation and hosting of a dynamic polyfill service. This service intelligently delivers custom polyfill bundles to clients based on their user-agent string and explicitly requested features, ensuring that browsers only receive the JavaScript code necessary to support modern web standards. This approach contrasts with static bundling, which often includes all polyfills regardless of need, leading to unnecessary payload size. The package is currently at version 1.0.126, suggesting ongoing development with frequent updates to its minor and patch versions. It is primarily designed for developers who wish to host their own polyfill service to optimize client-side performance and ensure broad browser compatibility without over-bundling. The core differentiator is its on-demand, user-agent-aware polyfill generation, reducing load times for modern browsers while providing full functionality for older ones. [17, 21]

npm install polyfill-bundler
INSTALL
IMPORT
SIG · POLYFILL-BUNDLER
P
polyfill-bundler
http-networkingjavascriptv1.0.126
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Demonstrates the client-side consumption of the `polyfill-bundler` service via a script tag, along with a conceptual Node.js server illustrating how such a service would dynamically generate polyfill bundles based on requested features. This quickstart highlights the primary use case of `polyfill-bundler` as a self-hostable service for optimizing polyfill delivery. [17]

<!-- Include this in your HTML to use the self-hosted polyfill service --> <script src="https://polyfill.your.domain/polyfill.js?features=AbortController,Array.from,Promise.prototype.finally"></script> // Example of how to start a very basic (not production-ready) Node.js server // that could theoretically serve polyfills, assuming polyfill-bundler provides // an API to generate them. (Note: The exact API for 'polyfill-bundler' as a library // to generate bundles programmatically is not directly exposed in the README snippet; // this is a conceptual server illustrating the client-side usage.) const http = require('http'); const url = require('url'); // In a real application, 'polyfill-bundler' would be used here to generate the bundle. // For this example, we'll simulate a response. function generatePolyfillBundle(features) { console.log(`Generating polyfill for features: ${features.join(', ')}`); // In a real scenario, this would use the polyfill-bundler logic // to detect user-agent and generate a minified, targeted polyfill string. // For demonstration, a simple placeholder. let bundle = ''; if (features.includes('AbortController')) bundle += '/* AbortController polyfill */\nself.AbortController = self.AbortController || function AbortController() { this.signal = { aborted: false }; };\n'; if (features.includes('Array.from')) bundle += '/* Array.from polyfill */\nif (!Array.from) { Array.from = (iterable) => [...iterable]; }\n'; if (features.includes('Promise.prototype.finally')) bundle += '/* Promise.finally polyfill */\nif (!Promise.prototype.finally) { Promise.prototype.finally = function(cb) { const P = this.constructor || Promise; return this.then(val => P.resolve(cb()).then(() => val), err => P.resolve(cb()).then(() => { throw err; })); }; }\n'; return bundle; } const server = http.createServer((req, res) => { const parsedUrl = url.parse(req.url, true); if (parsedUrl.pathname === '/polyfill.js') { const featuresParam = parsedUrl.query.features; const features = featuresParam ? featuresParam.split(',') : []; const polyfillCode = generatePolyfillBundle(features); res.writeHead(200, { 'Content-Type': 'application/javascript' }); res.end(polyfillCode); } else { res.writeHead(404, { 'Content-Type': 'text/plain' }); res.end('Not Found'); } }); const PORT = process.env.PORT ?? 3000; server.listen(PORT, () => { console.log(`Polyfill service running at http://localhost:${PORT}`); console.log('Access via: http://localhost:3000/polyfill.js?features=AbortController,Array.from'); });
Debug
Known issues
gotchaRelying on a polyfill service introduces an external dependency into your critical rendering path. If the service is unavailable or slow, your application may break or degrade for unsupported browsers. Self-hosting mitigates some, but not all, of these risks. [11]
fix
Implement robust error handling or fallback mechanisms in client-side code, and monitor the polyfill service's availability and performance diligently, especially if self-hosting.
affects: >=1.0.0
gotchaOver-polyfilling can lead to larger bundle sizes and unnecessary execution overhead for modern browsers that natively support the features. Ensure the feature detection logic is accurate and only necessary polyfills are included. [11, 14]
fix
Configure the polyfill service to precisely target features based on user-agent, or explicitly request only the needed polyfills via the URL query parameters.
affects: >=1.0.0
gotchaMultiple polyfills for the same feature (e.g., from the service and another library) can lead to conflicts, unexpected behavior, or increased bundle size. [9, 11, 23]
fix
Carefully manage polyfill inclusion. If using a polyfill service, avoid including global polyfills via bundlers (like Webpack's deprecated Node.js polyfills [12]) or other libraries, preferring the service for all global polyfill needs. For library authors, consider 'ponyfills' or documenting required polyfills for consumers. [9, 27]
affects: >=1.0.0
breakingWebpack 5 (and later bundlers like Vite/Rollup) no longer automatically polyfill Node.js core modules for browser targets. Projects bundling client-side code that directly or indirectly depend on Node.js globals (e.g., `Buffer`, `process`, `crypto`, `stream`) will encounter 'Module not found' or 'ReferenceError' issues, even if unrelated to `polyfill-bundler` itself. [7, 12, 16, 31]
fix
Manually add specific polyfills for Node.js core modules using bundler-specific plugins (e.g., `node-polyfill-webpack-plugin` [16], `rollup-plugin-polyfill-node` [25]) or by configuring fallbacks in your bundler setup. [7, 31]
affects: N/A (bundler specific)
Errors
Common errors & fixes
Uncaught ReferenceError: [Feature] is not defined
The requested polyfill for a specific JavaScript feature was either not included in the bundle or the feature detection logic failed to identify the need for it.
fix
Verify that the feature is correctly spelled in the `features` query parameter of the polyfill service URL. Ensure the user-agent string is being correctly parsed by the service to deliver the appropriate polyfills.
Failed to load resource: the server responded with a status of 404 (Not Found) for polyfill.js
The self-hosted polyfill service is not running or is not accessible at the specified URL, or the path to the polyfill endpoint is incorrect.
fix
Ensure your `polyfill-bundler` service is deployed and running, and that the `src` attribute in your `<script>` tag points to the correct endpoint (e.g., `https://polyfill.your.domain/polyfill.js`). Check server logs for deployment issues.
Module not found: Error: Can't resolve 'buffer' in 'your-project-path'
Your client-side JavaScript code or a dependency attempts to use Node.js-specific modules (like `buffer`) in a browser environment, and your bundler (Webpack 5+, Vite, Rollup) is no longer providing automatic polyfills for these. This is a common issue unrelated to the `polyfill-bundler` service, but relevant to general polyfill understanding. [7, 12, 31]
fix
Install browser-compatible polyfills for the missing Node.js modules (e.g., `npm install buffer --save-dev`) and configure your bundler to alias or provide fallbacks for them. For Webpack 5, `node-polyfill-webpack-plugin` is a common solution. [7, 16, 31]
Upgrade
Version history
1.0.126latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
10 hits · last 30 days
node
10
Resources
polyfill-bundler — npm install polyfill-bundler · libregistry