支持带有 terser + rollup 的旧浏览器？答案

【问题标题】：Support old browser with terser + rollup?支持带有 terser + rollup 的旧浏览器？
【发布时间】：2021-01-21 19:48:42
【问题描述】：

我需要支持相当老的浏览器...我最后还是要说回 IE10 或 11。

我添加了rollup 和terser...我想编写带有箭头函数等的 ES2017 代码...然后将其转换为非常旧版本的 JS 以在那些旧浏览器中运行。

这是我的汇总配置：

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/load.js',
  output: {
    file: 'dist/load.js',
    format: 'iife',
    sourcemap: false,
    plugins: [
      // https://github.com/terser/terser#minify-options
      terser({
        ecma: '5',
        compress: true,
        mangle: true,
      }),
    ],
  },
};

不幸的是，这似乎并没有真正将我的任何花哨的箭头函数转换为普通的匿名函数等......我有点困惑我在这里做错了什么？

我看到我可以通过compress 选项手动控制这些，但我觉得我不应该需要手动设置每种类型的功能，因为我不知道哪些浏览器支持什么。我会怀疑我只是告诉它“转换为 ES5”，然后它会完成其余的工作。

【问题讨论】：

显然 terser 实际上并没有转译任何东西......我需要使用 babel，但 babel 不支持缩小，所以我不确定 wtf 在这里做什么
是的，缩小和转译是两个不同的东西，所以使用两个插件。

标签： javascript ecmascript-6 babeljs rollup terser

【解决方案1】：

我是这样解决的

import { terser } from 'rollup-plugin-terser';
import getBabelOutputPlugin from '@rollup/plugin-babel';

export default {
  input: 'src/load.js',
  plugins: [
    // https://github.com/terser/terser#minify-options
    terser({
      ecma: '5',
      compress: true,
      mangle: true,
    }),
    getBabelOutputPlugin({
      babelHelpers: 'bundled',
      presets: [
        ['@babel/preset-env', {
          targets: '> 0.25%, last 2 versions, Firefox ESR, not dead',
        }],
      ],
    }),
  ],
  output: {
    file: 'dist/load.js',
    format: 'iife',
    sourcemap: false,
  },
};

【讨论】：