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

夜鹰
  • 742

问题描述

开发环境用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]));

你期待的结果是什么?实际看到的错误信息又是什么?

那么问题来了,配置里的babel似乎没有起什么效果,

我应该如何添加core-js之类的polyfill插件?谢谢!

回复
阅读 4.1k
1 个回答

@babel/preset-typescript

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏