ts-polyfill-loader v0.1.0

typescript-polyfills-generator

Runtime polyfills generator for TypeScript projects, inspired by @babel/preset-env

TLDR

This module solves https://github.com/Microsoft/TypeScript/issues/20095

Problem

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.

Usage

Requirements

• Node.js v10.3.0+

Installation

npm i --save-dev typescript-polyfills-generator

Webpack integration

1. Create a transformers file

// 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;

Options:

- 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
    }
})

2. Specify a path to transformers file in TS loader

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')
            }
        }
    ]
}

Examples

In

// test1.ts
const map = new Map();

// test2.ts
const fetchPromise = fetch('../data.json');

Out (if environment doesn't support it)

// 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.

Polyfills

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.

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments

This module would not be possible if not for a number of awesome open-source projects, like

• @babel/preset-env
• browserslist
• compat-table
• electron-to-chromium
• ts-loader
• awesome-typescript-loader