polyfill

polyfill

Babel只能处理一些JS的语法，如下ES6等的新用法不支持，需要使用polyfill(兼容性处理)

• 新的语法（箭头函数）
• 新的ES API（Promise）
• 新的实例方法(String.prototype.includes)

babel-polyfill

• babel默认只转换新的javascript语法，而不转换新的API(Iterator,Generator,Set,Maps,Proxy,Reflect,Symbol,Promise)
• ES6，新增的Array.form方法，Babel就不会转码这个方法，如果想使用这个方法，必须使用babel-polyfill来转换
• 安装babel npm i babel-loader @babel/preset-env @babel/core -D
• babel-polyfill 向全局对象和内置对象的prototype（原型上）上添加方法来实现的；缺点会造成全局变量的污染；

使用

• uesBuiltIns:false; 全量打包大概404K（无视兼容性）
• useBuiltIns:"entry",会去读取package.json,要引入corejs

要手动引入 步骤一

import '@babel/polyfill';//corejs2 直接引用（全量）404K 会很大 需要另外配置
//或者corejs3 前提是安装corejs3
import 'core-js';
import 'regenerator-runtime/runtime'; 
console.log('hello',);

步骤二

//package.json 增加
"browserslist": {
        "development": [//浏览器
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ],
        "production": [//浏览器市场占有率
            ">1%"
        ]
    }

步骤三：

 module:{
        rules:[
            {
                test:/\.js$/,
                use:[
                    {
                        loader:'bable-loader',
                        use:[
                            {
                                loader:'babel-loader',
                                options:{
                                    preset:[
                                        "@babel/preset-env",{
                                            useBuiltIns:'entry',//配置polyfill的相关情况
                                            corejs:3，//polyfill 基于corejs实现的
                                        }
                                    ]
                                }
                            }
                        ]
                    }
                ]
            },
        ]
    },

• useBuiltIns:"usage",会根据使用情况按需导入（最优）

• core-js;set map靠它实现 core-js2