@babel/plugin-transform-runtime和@babel/preset-env的区别

webpack4.35.0

@babel/plugin-transform-runtime

            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        "plugins": [
                            [
                                "@babel/plugin-transform-runtime",
                                {
                                    "absoluteRuntime": false,
                                    "corejs": false,
                                    "helpers": true,
                                    "regenerator": true,
                                    "useESModules": false
                                }
                            ]
                        ]
                    }
                }
            }

babel-plugin-transform-runtime主要做了一下三件事：

当你使用 generators/async 函数时，自动引入 babel-runtime/regenerator （使用 regenerator 运行时而不会污染当前环境） 。
自动引入 babel-runtime/core-js 并映射 ES6 静态方法和内置插件（实现polyfill的功能且无全局污染，但是实例方法无法正常使用，如 “foobar”.includes(“foo”) ）。
移除内联的 Babel helper 并使用模块 babel-runtime/helpers 代替（提取babel转换语法的代码）。

@babel/preset-env

1. 如果useBuiltIns为true，项目中必须引入babel-polyfill。
2. babel-polyfill只能被引入一次，如果多次引入会造成全局作用域的冲突。

            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "useBuiltIns": 'usage',
                                    "targets": {
                                        "chrome": "58",
                                        "ie": "11"
                                    }
                                }
                            ]
                        ]
                    }
                }
            }

由于有了 babel-present-env 才可以手动按需配置所需要的 polyfill
babel-present-env 仅仅包括 babel-present-2015、2016、2017，不包括：babel-stage-x，也不包括 babel-polyfill
babel-present-env 仅仅转换 新版的语法 如：箭头函数，并不转换新版api 如：Array.include
转换新版api及抹平浏览器之间的差异（兼容ie）需要 babel-polyfill