Rollup + @babel/preset-env + @babel/polyfill

Question

使用 Rollup 时，如何让它与 @babel/preset-env 和 @babel/polyfill 正常工作？文档中提到添加 useBuiltIns: 'usage'，但是当我这样做时，控制台会出现 require is not defined 错误。以下是我的代码；是否有更推荐的设置呢？

rollup.config.js:

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';

const dist = './dist/';
const name = 'focusoverlay';

export default {
  input: './src/index.js',
  output: [
    {
      file: `${dist}${name}.cjs.js`,
      format: 'cjs'
    },
    {
      file: `${dist}${name}.esm.js`,
      format: 'esm'
    },
    {
      name: 'FocusOverlay',
      file: `${dist}${name}.js`,
      format: 'umd'
    }
  ],
  plugins: [
      resolve(),
      babel({ exclude: 'node_modules/**' }),
      terser()
  ]
};

.babelrc：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "modules": false,
        "targets": {
          "browsers": "> 0.25%, not op_mini all, not dead, IE 10-11",
          "node": 6
        }
      }
    ]
  ]
}

- Maurice

Answer 1

我解决了这个问题，方法是删除我的.babelrc文件，并将我的babel配置完全移动到rollup.config.js中。 然后我还包括了rollup-plugin-commonjs插件来将CJS模块转换为ES6。 我的最终配置示例：

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

const dist = './dist/';
const name = 'focusoverlay';

export default {
  input: './src/index.js',
  output: [
    {
      file: `${dist}${name}.cjs.js`,
      format: 'cjs'
    },
    {
      file: `${dist}${name}.esm.js`,
      format: 'esm'
    },
    {
      name: 'FocusOverlay',
      file: `${dist}${name}.js`,
      format: 'umd'
    }
  ],
  plugins: [
      resolve(),
      babel({
        exclude: 'node_modules/**',
        presets: [
          [
            '@babel/env',
            {
              modules: 'false',
              targets: {
                browsers: '> 1%, IE 11, not op_mini all, not dead',
                node: 8
              },
              useBuiltIns: 'usage'
            }
          ]
        ]
      }),
      commonjs(),
      terser()
  ]
};

完整的配置在这里。当然，欢迎提出改进建议。

- Maurice

---

rollup-plugin-babel已经被弃用。请访问https://github.com/rollup/rollup-plugin-babel。 - Tahazzot

@MdTahazzot 不是，仓库只是被移动了。 - jbg

@jbg 哦，对了。谢谢你提醒我。祝你有美好的一天。 - Tahazzot