1.箭头函数测试

1.1.index.js

src\index.js

  1. const add = (x, y) => {
  2.     return x + y
  3. }
  5. console.log(add(2, 5));

1.2.index.html

src\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>Hello Yiu</div>
</body>
</html>

1.3.webpack.config.js

webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // mode: 'production',
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {},
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
    ],
}

1.4.编译结果

可以看到开发编译中，结果还是有箭头函数的。
image.png

1.5.浏览器运行

image.png

2.语法兼容

2.1.安装babel-loder

babel-loader

npm install -D babel-loader @babel/core @babel/preset-env

2.2.webpack.config.js

这样箭头函数就会变成function了。
webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // mode: 'production',
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        // 预设，做怎样的兼容性处理
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
    ],
}

3.Promise测试

3.1.index.js

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

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

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

console.log(promise);

3.2.浏览器测试

image.png

4.高级函数兼容

4.1.babel-polyfill

4.1.1.安装

babel-polyfill

npm install --save @babel/polyfill

4.1.2.index.js

src\index.js

import "@babel/polyfill"

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

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

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

console.log(promise);

4.1.3.说明

这样打包后就可以使用高级类了
缺点：https://blog.csdn.net/lgysjfs/article/details/86614851

  • 之前打包1kb，现在打包400kb。
  • babel-polyfill 会污染全局变量。

4.2.core/js

4.2.1.安装

npm i core-js -D

4.2.2.index.js

src\index.js

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

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

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

console.log(promise);

4.2.3.webpack.config.js

babel-preset-env配置详情
webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // mode: 'production',
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        // 预设，做怎样的兼容性处理
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage',
                                    corejs: { version: 3 },
                                    targets: { chrome: '60', firefox: '60', ie: '9', safari: '10', edge: '17' }
                                }
                            ],
                        ]
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
    ],
}

4.2.4.说明

此时开发代码无入侵，打包大小也从之前的400kb变成了100kb。