转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack的js兼容性处理

js兼容性检查主要用到的 loader 有
babel-loader@8.3.0
@babel/core@7.14.6
@babel/preset-env@7.14.7 基本语法兼容性处理
@babel/polyfill@7.12.1 全部js兼容性处理，缺点是无法按需加载兼容函数，而是全量加载，打包的 js 文件很大，
core-js@3.32.1 全部js兼容性处理，可以按需加载兼容函数

兼容性处理的原理是打包后的 js 文件中会将不兼容的 js 函数、格式、命名规则等转换为可以多浏览器兼容的 js 代码。

一、最终配置示例

/*
    webpack.config.js webpack的配置文件
    路径： ./webpack.config.js
*/

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // webpack配置
    // 入口起点文件
    entry: './src/js/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'js/built.js',
        // 输出路径
        // __dirname nodejs的变量,代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build'),
    },
    // loader的配置
    module: {
        rules: [
            // 详细loader配置
            //不同文件必须配置不同loader处理

            /*
                 js兼容性处理:babel-loader @babel/core @babel/preset-env
                 1.基本js兼容性处理 @babel/preset-env
                 问题：只能转换基本语法，如promise不能转换 
                 2．全部js兼容性处理 --> @babel/polvfill
                 问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~ 
                 3. 需要做兼容性处理的就做：按需加载 --> core-js
                 */
            {
                test: /\.(?:js|mjs|cjs)$/,
                // 指定检查的目录，或者配置排除某些文件夹
                // include: [path.resolve(__dirname, 'src')], 
                // 注意:只检查自己写的源代码,第三方的库是不用检查的,这里排除node_modules文件夹
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    // 预设：指示 babel 做怎么样的兼容性处理
                    "presets": [
                        [
                            "@babel/preset-env",
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 制定 core-js 版本
                                corejs: {
                                    version: 3
                                },
                                //指定兼容性做到哪个版本的浏览器
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            },
        ],
    },
    // plugins的配置
    plugins: [
        // 详细的plugins配置
        // html-webpack-plugin
        // 功能:默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
        // 需求:需要有结构的HTML文件
        new HtmlWebpackPlugin({
            // 复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
            template: './src/index.html',
        }),
    ],
    // 模式  development  开发环境，production 生产环境
    mode: 'development',
    // 生产环境下会自动压缩js代码
    // mode: 'production'
};

三、全部js兼容性处理，全量加载兼容函数时的 index.js 文件和webpack配置

/*
   使用全量加载兼容函数的形式时的index.js
    路径： ./js/index.js
*/

// 全量加载无需修改 webpack的配置文件，
// 仅需要在入口 index.js 中引入 '@babel/polyfill'，并安装@babel/preset-env  包
import '@babel/polyfill'

const add = (x, y) => {
  return x + y;
}

console.log(add(2, 3));


const promise = new Promise((resolve) => {
  setTimeout(() => {
    console.log('定时器被执行……')
    resolve();
  }, 1000)
})

console.log(promise);

/*
    webpack.config.js webpack的配置文件
    路径： ./webpack.config.js
*/

……
module.exports = {
……
    module: {
        rules: [
            // 详细loader配置
            //不同文件必须配置不同loader处理

            /*
                 js兼容性处理:babel-loader @babel/core @babel/preset-env
                 1.基本js兼容性处理 @babel/preset-env
                 问题：只能转换基本语法，如promise不能转换 
                 2．全部js兼容性处理 --> @babel/polvfill
                 问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~ 
                 */
            {
                test: /\.(?:js|mjs|cjs)$/,
                // 指定检查的目录，或者配置排除某些文件夹
                // include: [path.resolve(__dirname, 'src')], 
                // 注意:只检查自己写的源代码,第三方的库是不用检查的,这里排除node_modules文件夹
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    // 预设：指示 babel 做怎么样的兼容性处理
                    "presets": [ "@babel/preset-env", ]
                }
            },
        ],
    },
    // plugins的配置
    plugins: [
……
    ],
    // 模式  development  开发环境，production 生产环境
    mode: 'development',
    // 生产环境下会自动压缩js代码
    // mode: 'production'
};

四、全部js兼容性处理，按需加载兼容函数时的 index.js 文件和webpack配置

/*
   使用按需加载兼容函数的形式时的index.js
    路径： ./js/index.js
*/

const add = (x, y) => {
  return x + y;
}

console.log(add(2, 3));


const promise = new Promise((resolve) => {
  setTimeout(() => {
    console.log('定时器被执行……')
    resolve();
  }, 1000)
})

console.log(promise);

/*
    webpack.config.js webpack的配置文件
    路径： ./webpack.config.js
*/

……
module.exports = {
……
    // loader的配置
    module: {
        rules: [
            // 详细loader配置
            //不同文件必须配置不同loader处理

            /*
                 js兼容性处理:babel-loader @babel/core @babel/preset-env
                 1.基本js兼容性处理 @babel/preset-env
                 问题：只能转换基本语法，如promise不能转换 
                 2．全部js兼容性处理 --> @babel/polvfill
                 问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~ 
                 3. 需要做兼容性处理的就做：按需加载 --> core-js
                 */
            {
                test: /\.(?:js|mjs|cjs)$/,
                // 指定检查的目录，或者配置排除某些文件夹
                // include: [path.resolve(__dirname, 'src')], 
                // 注意:只检查自己写的源代码,第三方的库是不用检查的,这里排除node_modules文件夹
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    // 预设：指示 babel 做怎么样的兼容性处理
                    "presets": [
                        [
                            "@babel/preset-env",
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 制定 core-js 版本
                                corejs: {
                                    version: 3
                                },
                                //指定兼容性做到哪个版本的浏览器
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            },
        ],
    },
    // plugins的配置
    plugins: [
……
    ],
    // 模式  development  开发环境，production 生产环境
    mode: 'development',
    // 生产环境下会自动压缩js代码
    // mode: 'production'
};

五、安装需要loader

# 安装需要的loader
> npm i babel-loader@8.3.0  @babel/core@7.14.6 @babel/preset-env@7.14.7 core-js@3.32.1 -D

六、运行

> npx webpack