babeljs - 无论设置了哪些目标,Babel polyfill 都包含所有的 polyfill
问题描述
我将 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 应该只包含所需的 polyfill(因为useBuiltIns: "usage"
)。但是,即使将最新的浏览器指定为目标,我也会将全部代码加载到我的包中(10000 行代码)。
我尝试了什么:
我尝试
useBuiltIns: "entry"
为较新的浏览器修复它,但它不是我想要的(它只包括浏览器可能需要的所有 polyfill,无论它们是否实际在代码中使用)。更改汇总插件的顺序
- 不包括
babel-polyfill
进口
我不知道为什么会这样。如果有人能解决这个问题,那就太好了。这让我疯狂!
如果有人知道为什么没有生成源地图作为奖励,我也不介意得到答案
解决方案
嘿,我做了一个 repo,它探索了一个使用 preset-env 和 useBuiltIns 'usage' 的良好 babel/rollup 设置。
// 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
推荐阅读
- c++ - C++ - 如何通过引用传递对象以访问其方法?
- google-cloud-platform - 在 GCP 人脸检测中,我们应该假设哪个轴是测量侧倾角的轴?
- php - 如何确定 infusionsoft 联系人是否具有特定的标签 ID
- c++ - What is the best way to read a structure from a binary file containing IP header fragments?
- javascript - 使用 jest 运行测试时如何修复“测试套件无法运行”
- typescript - 如何在joint.d.ts、jointjs中扩展命名空间
- docker - gunicorn:错误:在 Docker 中运行烧瓶应用程序时无法识别的参数
- vue.js - 忽略未定义的道具
- jboss-developer-studio - Developer Studio 12.0.0.GA 安装后无法启动
- git - 如何让 CMake 的 ExternalProject_Add 在 Visual Studio 中工作(git-submodule 问题)?