使用babel处理ES6语法（一）_13

使用babel处理ES6语法

index.js文件中写一些ES6语法

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

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

使用npx webpack命令进行打包（这里不用webpack-dev-server的原因是打包后生成的文件直接放到的内存中，不方便我们查看打包文件）

可以看到打包生成的main.js中最后一部分就是我们在index.js中写的ES6的代码。
但是这段代码在一些浏览器中，如IE浏览器对ES6的语法不支持会在控制台报错。因此我们想要将ES6的代码打包转化成ES5的代码。那么所有浏览器都不会有问题了，我们借助babel
进入babel官网，点解设置，选择你使用的场景，这里我们选择 webpack

1.选择配置场景

2.安装相关文件

npm install --save-dev babel-loader @babel/core

这里我们需要先安装两个文件 babel-loader打包处理ES6代码，babel-core是babel的核心库，能够识别js代码中的内容，然后转换成AST抽象语法树，然后编译成新的语法出来

3.配置打包规则

然后在webpack配置文件中添加这段规则

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports = {
    mode: "development",
    devtool: 'eval-cheap-module-source-map',
    // production
    // devtool: 'cheap-module-source-map',
    entry: {
        main: './src/index.js'
    },
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        // hotOnly：即便hot功能没有生效，也不让浏览器刷新
        hotOnly: true
    },
    output: {
        publicPath: '/',
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                // exclude 如果你的js文件在 node_modules中则不使用 babel-loader
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.jpeg$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: 'images/',
                        limit: 10240
                    }
                }
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2
                        }
                    },
                    "postcss-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(eot|ttf|svg|woff|woff2)$/,
                use: {
                    loader: 'file-loader',
                }
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "postcss-loader",
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin(['dist']),
        new webpack.HotModuleReplacementPlugin()
    ]
}

4.添加翻译模块，添加配置文件

第四步需要安装babel/preset-env

npm install @babel/preset-env --save-dev

使用babel-loader处理js文件的时候，实际上是webpack和babel做通信的桥梁，但是babel-loader并不会把js中的ES6的语法转成ES5的语法，还需要借助babel/preset-env模块来翻译。这个模块里面包含了所有ES6转换成ES5的翻译规则

再次执行npx webpack命令进行打包，可以看到我们的代码已经转化成ES5的代码
const --> var , () => --> function() {}等等，但是这里只是转化了一部分，一些数组的语法在低版本的浏览器上还是不支持。这里还需要借助babel-polyfill帮我们在低版本浏览器上做一些变量和函数的补充，所以babel-polyfill非常的大

安装 babel-polyfill并在所有代码运行之前 引入babel-polyfill

npm install --save @babel/polyfill

import "@babel/polyfill";

对比两次打包，因为引入了babel-polyfill体积增加了很大

理论上来说，我们只需要babel-polyfill实现我们index.js文件中的Promise,map等方法，实际上不需要全部翻译实现ES6的语法。根据业务代码实现ES6的语法，做如下配置

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

执行npx webpack，可以发现体积精简到了 167KB小了很多，这样我们在低版本浏览器也能正常执行ES6的代码，包体积也做到了精简