重构之路:webpack配置es6语法

1,901 阅读2分钟

开始

之前已经写好了最简单的一个webpack配置,并且已经可以运行js了,但是,新时代的前端肯定要写es6啊,但是我们在index.js里写上es6的语法时,比如:

//使用es6里的set和扩展运算符来实现数组去重
var set=new Set([1,2,2,3,3,4,4,5,5]);
console.log([...set]);//[1,2,3,4,5]

//顺便写一个一行代码实现数组去重,这个也算个面试题了
[...new Set([1,2,2,3,3,4,4,5,5])]//[1,2,3,4,5]

这个时候打包运行代码,在谷歌下可以正常运行,这是因为谷歌本身就支持这样的语法,但是在IE下会报这样的错(万恶的IE),所以我们要使用polyfill来转化它。

在这里插入图片描述

默认情况下babel可以将箭头函数,class等语法转换为ES5兼容的形式,但是却不能转换Map,Set,Promise等新的全局对象,这时候就需要使用polyfill去模拟这些新特性

我们在控制台执行:

yarn add @babel/polyfill @babel/runtime //注意这里不加-D
yarn add @babel/plugin-transform-runtime -D

然后我们在webpack.config.js里配置:

{
                test:/\.(js)$/,
                exclude: '/node_modules/',
                include:path.resolve(__dirname,'src'),
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:[
                                '@babel/preset-env',
                            ],
                            plugins:[
                                "@babel/plugin-transform-runtime"
                            ]
                        }
                    }
                ]
            }

然后在index.js里的顶部写上:

import "@babel/polyfill" //添加这一行

var set=new Set([1,2,2,3,3,4,4,5,5]);
console.log([...set]);

然后我们再去控制台里执行webpack,我们发现打包后的体积突然变得这么大?之前明明只有几kb的。这是因为polyfill自己实现es6的兼容语法,将很多很多的兼容语法打包到一起了,导致包体积变大。

上面我们还添加了runtime插件,这个插件后期可以和@babel/preset-env实现按需加载,所以这里先配置了。 (ps:我们在后面的章节会说如何去优化包体积的)

在这里插入图片描述
然后我们打开index.html页面,在IE下变成了下面这样,我们就完成了配置es6的语法
在这里插入图片描述