(webpack篇)5.Babel处理ES6

说明：我们写ES6代码的时候，不是所有浏览器都能兼容的，这时候我们就可以借助于Babel进行转换成ES5语法

• 1.安装 npm install --save-dev babel-loader @babel/core

• 2.配置 webpack.config.js中

...
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        },   
        ...
        ]
    },
    ...
}

• 3.说明 上面这些操作只是给babel和js代码构建了桥梁，如果能实现ES6转ES5代码还需要下面操作

• 4.继续安装 npm install @babel/preset-env --save-dev

• 5.补充src/index.js代码

const arr = [
    new Promise(() => {}),
    new Promise(() => {})
];

arr.map(item => {
    console.log(item)
})

• 6.运行打包操作 npm run build

• 7.打包结果

说明：这时候已经ES6语法转换为ES5了，但是有些浏览器还是识别不了promise map...这时候我们需要继续操作。

• 8.使用polyfill a.安装 npm install --save @babel/polyfill

b.在业务代码src/index.js代码最顶部使用如下代码

import "@babel/polyfill";

打包即可，但是会存在一个问题，打包之后的包过大，影响性能

c.解决方案
有点类似于按需加载，在webpack.config.js中进行设置

...
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [['@babel/preset-env', {
                        useBuiltIns: 'usage'
                    }]]
                }
            }
        }
        ...
        ]
    },
    ...
}

• 9.polyfill可以配置选择对应浏览器开发版本来自动判断是否都转成es5识别的。

...
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [['@babel/preset-env', {
                        targets: {
                            chrome: "67",
                        },
                        useBuiltIns: 'usage'
                    }]]
                }
            }
        }
        ...
        ]
    },
    ...
}

说明：因为支持的是大于chrome浏览器的这个版本，这时候chrome浏览器可以识别promise map的这些写法，所以会不转义，减少了压缩代码的大小提高了性能。