2021-07-23

最新推荐文章于 2024-09-25 15:17:39 发布

前端小咸鱼一条

最新推荐文章于 2024-09-25 15:17:39 发布

阅读量140

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/xiaoxiannvh/article/details/119029496

版权

webpack5:解决js兼容IE浏览器使用babel-preset-env后依然无效

在这里插入图片描述
js兼容性处理：babel-loader @babel/core

基本js兼容性处理 --> @babel/preset-env
问题：只能转换基本语法，如：promise高级语法不能转
全部js兼容性处理 -->@babel/polyfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
需要做兼容性处理就做：按需加载 --> core-js

1). 先安装包

基本js兼容性处理 --> @babel/preset-env
npm i abel-loader @babel/core -D
npm i @babel/preset-env -D

全部js兼容性处理 --> @babel/polyfill
npm i @babel/preset-env -D

按需加载 --> core-js
npm i core-js -D

webpack.config.js配置：
  			针对基本js兼容性处理 -->  @babel/preset-env
  		    按需加载 --> core-js

2).配置webpack.config.js

 {
                test: /\.js$/,
                exclude: /node_modules/,
                use:{
                    loader: "babel-loader",
                    options:{
                        // 预设： 指示babel做怎么样的兼容性处理
                        // presets: ["@babel/preset-env"]
                        presets:[
                            [
                                "@babel/preset-env",
                                {
                                    // 按需加载
                                    useBuiltIns:'usage', 
                                    // 指定core-js版本
                                    corejs:{
                                        version:3
                                    },
                                    // 指定兼容性做到那个版本浏览器
                                    targets:{
                                        chrome:'58',
                                        firefox:'60',
                                        ie:'9',
                                        safari:'10',
                                        edge:17
                                    }
                                }
                            ]
                        ]
          
                    }
                }
            }

3).package.json配置

"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }