webpack5浏览器兼容:babel-loader, core-js,plugin-transform-runtime

1，core-js：将我们的代码编译后成为浏览器可执行的代码，其中主要处理 ES 的API，他是运行的一个API 补丁包集合, 也可以理解为：它是JavaScript标准库的 polyfill。
 

官方库对他介绍的形容：
1.1它支持最新的 ECMAScript 标准
1.2它支持ECMAScript 标准库提案
1.3它支持一些 WHATWG / W3C 标准（跨平台或者 ECMAScript 相关）
1.4它最大限度的模块化：你能仅仅加载你想要使用的功能
1.5它能够不污染全局命名空间
1.6它和babel紧密集成：这能够优化core-js的导入
1.7它是最普遍、最流行 的给 JavaScript 标准库打补丁的方式
 

2，plugin-transform-runtime

大致有3大作用：
2.1 自动移除语法转换后内联的辅助函数（inline Babel helpers），使用@babel/runtime/helpers里的辅助函数来替代；
2.2 当代码里使用了core-js的API，自动引入@babel/runtime-corejs3/core-js-stable/，以此来替代全局引入的core-js/stable;
2.3 当代码里使用了Generator/async函数，自动引入@babel/runtime/regenerator，以此来替代全局引入的regenerator-runtime/runtime；
 

3. @babel/plugin-proposal-class-properties 和 @babel/plugin-proposal-object-rest-spread

plugin-proposal-class-properties 和 plugin-proposal-object-rest-spread 帮助生成符合规范的代码

4. 如下代码是使用core-js 处理浏览器兼容性问题的配置：

需要先 安装依赖：
npm i babel-loader @babel/preset-env core-js @babel/plugin-proposal-class-properties
@babel/plugin-proposal-object-rest-spread @babel/plugin-transform-runtime -D
npm i @babel/runtime

1.  
   const {resolve} = require('path')
2.  
   const MiniCssExtractPlugin = require('mini-css-extract-plugin')
3.  
   const HtmlWebpackPlugin = require('html-webpack-plugin')
4.  
   const ESLintWebpackPlugin = require('eslint-webpack-plugin')
5.  
    
6.  
   // npx webpack-dev-server
7.  
   module.exports = {
8.  
   entry: './src/js/main.js', // 文件入口
9.  
   output: {
10.  
    filename: 'js/bundle.js', // 生成文件
11.  
    path: resolve(__dirname, 'dist'), // 生成路径
12.  
    clean: true
13.  
    },
14.  
    module: {
15.  
    rules: [{
16.  
    test: /\.((c|le)ss)$/,
17.  
    use: [
18.  
    MiniCssExtractPlugin.loader,
19.  
    'css-loader',
20.  
    {
21.  
    loader: 'postcss-loader',
22.  
    options: {
23.  
    postcssOptions: {
24.  
    plugin: [
25.  
    // postcss 插件
26.  
    ['postcss-preset-env'],
27.  
    {
28.  
    // 其他选贼
29.  
    }
30.  
    ]
31.  
    }
32.  
    }
33.  
    },
34.  
    'less-loader'
35.  
    ]
36.  
    }, {
37.  
    test: /\.(png|jpg|avg|gif)$/,
38.  
    parser: {
39.  
    dataUrlCondition: {
40.  
    maxSize: 8 * 1024
41.  
    }
42.  
    },
43.  
    generator: {
44.  
    filename: 'imgs/[hash:10][ext][query]'
45.  
    }
46.  
    }, {
47.  
    test: /\.html$/,
48.  
    loader: 'html-loader'
49.  
    }, {
50.  
    test: /\.(mp4|ttf|waff2?)$/,
51.  
    type: 'asset/resource',
52.  
    generator: {
53.  
    filename: 'media/[hash:8].[ext][query]'
54.  
    }
55.  
    }, {
56.  
    test: /\.m?js$/,
57.  
    exclude: /(node_modules|bower_components)/,
58.  
    use: {
59.  
    loader: 'babel-loader',
60.  
    options: {
61.  
    presets: [
62.  
    [
63.  
    '@babel/preset-env',
64.  
    {
65.  
    useBuiltIns: 'usage',
66.  
    corejs: 3,
67.  
    targets: {
68.  
    chrome: '58',
69.  
    firefox: '60',
70.  
    ie: '8',
71.  
    safari: '10',
72.  
    edge: '15'
73.  
    }
74.  
    }
75.  
    ]
76.  
    ],
77.  
    plugins: [
78.  
    '@babel/plugin-transform-runtime',
79.  
    // plugin-proposal-class-properties 和 plugin-proposal-object-rest-spread 帮助生成符合规范的代码
80.  
    '@babel/plugin-proposal-class-properties',
81.  
    '@babel/plugin-proposal-object-rest-spread'
82.  
    ]
83.  
    }
84.  
    }
85.  
    }]
86.  
    },
87.  
    plugins: [
88.  
    new HtmlWebpackPlugin({
89.  
    template: './src/index.html'
90.  
    }),
91.  
    new MiniCssExtractPlugin({
92.  
    filename: 'css/[name].css',
93.  
    chunkFilename: '[id].css'
94.  
    }),
95.  
    new ESLintWebpackPlugin({
96.  
    context: resolve(__dirname, 'src'),
97.  
    fix: true
98.  
    })
99.  
    ],
100.  
     mode: 'development',
101.  
     devServer: {
102.  
     port: 3000,
103.  
     compress: true,
104.  
     open: true,
105.  
     watchFiles: [
106.  
     './src/index.html'
107.  
     ]
108.  
     }
109.  
     }

这篇好文章是转载于：学新通技术网