用Rollup将TS转成ES5，如何添加polyfill?

Question

用Rollup将TS转成ES5，如何添加polyfill?

742

更新于 2019-02-17

问题描述

开发环境用Rollup构建TS代码，将其转为ES5, 配置如下：

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

问题出现的环境背景及自己尝试过哪些方法

问题是，代码经过编译后，像Array.from、Map、Set这些ES6+的函数，它并没有编译成ES5的实现。

相关代码

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