Question

我将Babel 7.1与汇总（v0.67）一起使用。这是我的汇总配置：

{
  input: 'src/svg.js',
  output: {
    file: 'dist/myBundle.js',
    name: 'myBundle',
    sourceMap: true,
    format: 'iife'
  },
  plugins: [
    resolve({browser: true}),
    commonjs(),
    babel({
      include: 'src/**',
      runtimeHelpers: true,
      babelrc: false,
      presets: [["@babel/preset-env", {
        modules: false,
        targets: {
          firefox: "63"
        },
        useBuiltIns: "usage"
      }]],
      plugins: [["@babel/plugin-transform-runtime", {
        corejs: false,
        helpers: true,
        regenerator: true,
        useESModules: true
      }]]
    })
  ]
}

我想填充旧版浏览器。根据文档，我需要在进入点包括babel-polyfill。现在，babel应该只包含所需的polyfills（由于useBuiltIns: "usage"）。但是，即使将最新的浏览器指定为目标，我也会将全部代码加载到我的软件包中（10000行代码）。

我尝试过的事情：

我尝试过useBuiltIns: "entry"，它可以为较新的浏览器修复，但不是我想要的（它仅包含浏览器可能潜在使用的所有polyfill，无论它们是否在代码中实际使用）。
更改汇总插件的顺序
不包括babel-polyfill导入

我不知道为什么会这样。如果有人可以解决这个问题，那就太好了。它让我发疯！

如果有人知道为什么不生成任何源图，我也不介意获得答案

Answer 1

嘿，我做了一个回购，它使用预置环境和useBuiltIns'用法'探索了一个好的babel /汇总设置。

// Rollup plugins
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';

export default {
    input : 'main.js',
    output : {
        file : 'app.js',
        format : 'iife',
        name : 'PROJECT'
    },
    plugins : [
        resolve(),
        babel({
            exclude : 'node_modules/**',
            presets : [[
                '@babel/env', {
                    useBuiltIns : 'usage'
                }
            ]],
            plugins : [
                '@babel/plugin-transform-runtime'
            ],
            runtimeHelpers : true
        }),
        commonjs()
    ]
};

看看https://github.com/matt3224/rollup-babel7

如果您能弄清楚如何减少输出，请进一步提交PR

Babel polyfill包括所有polyfills，无论设置了哪些目标

1 个答案: