Webpack 打包 - 12. JS兼容性处理

这里使用 babel 处理 js 兼容性问题

1.文件结构

 

 

 

 

2.安装 babel  core-js

$ npm i babel@6.23.0 @babel/core@7.8.4 @babel/polyfill@7.8.3 babel-loader@8.0.6 @babel/preset-env -D
$ npm i core-js@3.6.4 -D

 

3. 代码

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
<h5>webpack</h5>
</body>
</html>

 

index.js

//第二种方式: 全部js兼容性处理
// import '@babel/polyfill'
const add = (x, y)=> {
  return x + y;
}
console.log(add(1, 2));

const promise = new Promise((resolve)=>{
  setTimeout(()=>{
    console.log('定时器执行完毕')
    resolve()
  },1000)
})
console.log("promise:",promise)

 webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: "js/built.js",
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            /*
                js兼容性处理：babel-loader @babel/core
                  1. 基本js兼容性处理 --> @babel/preset-env
                    问题：只能转换基本语法，如promise高级语法不能转换
                  2. 全部js兼容性处理 --> @babel/polyfill
                    问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
                  3. 需要做兼容性处理的就做：按需加载  --> core-js
              */
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    //预设: 指示 babel 做怎样的兼容性处理
                    presets: [
                        //presets 这里是俩 中括号!!!!!!!!!!!!!!!!!!!!!!!!!!!
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 指定 core-js版本
                                corejs: {
                                    version: 3
                                },
                                // 指定兼容性做到哪个版本浏览器
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: "development"
}

 

4.打包

$ webpack

 

 

 

end~

 

posted @ 2022-09-08 15:06  Evengod  阅读(97)  评论(0)  编辑  收藏  举报