webpack, js 兼容性处理

JS兼容性处理

最新推荐文章于 2023-06-18 15:25:04 发布

原创最新推荐文章于 2023-06-18 15:25:04 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack 专栏收录该内容

7 篇文章

订阅专栏

本文介绍JavaScript兼容性处理的三种方式：使用@babel/preset-env进行基本语法转换；使用@babel/polyfill一次性引入所有polyfills；使用core-js按需加载polyfills。文中详细解释了如何配置这些工具来实现不同需求。

js兼容性处理
首先下载基本架包babel-loader @babel/core

1.基本js兼容性处理 @babel/preset-env

只能处理基本js语法，想promise。。。。无法处理

2.全部js兼容性处理@babel/polyfill

相当与一次性引入所有处理后js代码，比如全部引入element-ui。以至于架包太大。

3.兼容性的按需引入core-js

{   
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                options:{
                    presets:[
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns:'usage',
                                corejs:{
                                //core-js的版本
                                    version:3
                                },
                                //需要兼容的浏览器
                                targets:{
                                    chrome:'60',
                                    firefox:'60',
                                    ie:'9',
                                    safari:'10',
                                    edge:'17'
                                }
                            }
                        ]
                    ]
                }
                }
                
            }