webpack babel根据配置打包生成对应的polyfill

发表于 | 分类于 | 阅读次数:

在使用webpack+babel的时候，经常会配到需要添加polyfill,根据搜索到的资料一般都是在入口文件引入polyfill,这样的话，打包出来的文件会比较大，不太适合移动端的项目，多番资料查找验证之后，可以对.babelrc文件做以下处理即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false, //设置ES6 模块转译的模块格式 默认是 commonjs
                "targets": { // 配支持的环境
                    "browsers": ["ie >=10"]
                },
                "useBuiltIns": "usage", // 是否开启自动支持 polyfill
                "debug": true // debug，编译的时候 console
            }
        ]
    ],
    "plugins": ["@babel/transform-runtime"]
}
// 其实就是对babel做配置，但是一般项目的starter里边很少有如此配置的，所以就给忽略了