Use Rollup to convert TS to ES5, how to add polyfill?

problem description

the development environment builds the TS code with Rollup, converts it to ES5, and configures it as follows:

// rollup.config.js
import typescript from "rollup-plugin-typescript2"
import buble from "rollup-plugin-buble"
import babel from "rollup-plugin-babel"

export default {
  input: "src/index.ts",
  output: [
    {
      file: "dist/index.js",
      format: "es",
    },
  ],
  plugins: [
    typescript(),
    babel({
      babelrc: false,
      presets: [["env", { modules: false }]],
    }),
    buble()
  ],
}
// tsconfig.js
{
    "compilerOptions": {
        "moduleResolution": "node",
        "lib": ["es2015", "es2016", "es2017", "dom"],
        "declaration": true,
        "target": "es5",
        "module": "es6",
        "outDir": "./dist/",
        "strict": true,
        "esModuleInterop": true,
        "experimentalDecorators": true
    }
}

the environmental background of the problems and what methods you have tried

The problem with

is that after the code has been compiled, ES6+ functions like Array.from, Map, and Set are not compiled into an implementation of ES5.

related codes

// TS
class Greeter {
    getArr(arr:number[]) {
        return Array.from(new Set(arr))
    }
}
const greet = new Greeter();
console.log(greet.getArr([1, 4, 2, 3, 4]))

=====


// "ES5" 
var Greeter = /** @class */ (function () {
    function Greeter() {
    }
    Greeter.prototype.getArr = function (arr) {
        // 
        return Array.from(new Set(arr));
    };
    return Greeter;
}());
var greet = new Greeter();
console.log(greet.getArr([1, 4, 2, 3, 4]));

what result do you expect? What is the error message actually seen?

so here"s the problem. The babel in the configuration doesn"t seem to have any effect.

how should I add polyfill plug-ins such as core-js? Thank you!

Jun.23,2022

use @ babel/preset-typescript

Menu