Runtime polyfills generator for TypeScript projects, inspired by @babel/preset-env
โ ๏ธ !!! This module is on Proof of Concept stage, please, be careful using it in production !!!
This module solves microsoft/TypeScript#20095
If you do not use Babel in your development process (as I do), but you still want to have a flexible way to include polyfills based on browserslist config (as @babel/preset-env does) this module comes to rescue.
- Node.js v10.3.0+
npm i --save-dev typescript-polyfills-generator
// webpack.ts-transformers.js
const {createPolyfillsTransformerFactory} = require('typescript-polyfills-generator');
const getCustomTransformers = () => {
return {
before: [
createPolyfillsTransformerFactory({
targets: 'last 2 version, not ie < 11, not ie_mob < 11, safari >= 9'
})
]
};
};
module.exports = getCustomTransformers;
- targets - optional, you may use any valid Browserslist config
- polyfills - optional, you may specify a custom list of polyfills:
createPolyfillsTransformerFactory({
polyfills: {
'es6.fetch': 'my-polyfills-module', // import from 'my-polyfills-module'; will be added if Fetch API is not supported by your targets
'es6.object.assign': false // never include polyfill for Object.assign
}
})
const path = require('path');
// Your webpack config...
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader', // or 'awesome-typescript-loader'
options: {
getCustomTransformers: path.join(__dirname, './webpack.ts-transformers.js')
}
}
]
}
// test1.ts
const map = new Map();
// test2.ts
const fetchPromise = fetch('../data.json');
// test1.ts
import "core-js/modules/es6.map";
const map = new Map();
// test2.ts
import "whatwg-fetch";
const fetchPromise = fetch('../data.json');
Check awesome-typescript-loader and ts-loader test cases to find more examples.
All polyfills are imported from core-js package, but there are some specific polyfills that are not supported by core-js:
- whatwg-fetch - Fetch API
- typescript-polyfills-generator/lib/polyfills/es5.array.unshift.js - Fixes
Array.prototype.unshift
in Safari - typescript-polyfills-generator/lib/polyfills/es5.location.origin.js - Adds
Location.origin
in IE
Check the transfromer options to see how disable or reassign any polyfill module.
This project is licensed under the MIT License - see the LICENSE file for details
This module would not be possible if not for a number of awesome open-source projects, like