webpack多页运用架构系列（八）：锻练我要写ES6！webpack怎样整合Babel？

2024年2月7日 202次阅读来源: array_huang

本文首发于
Array_Huang的手艺博客——
有效至上，非经作者赞同，请勿转载。
原文地点：
https://segmentfault.com/a/1190000006992218
假如您对本系列文章感兴致，迎接关注定阅这里：
https://segmentfault.com/blog/array_huang

媒介

一直以来，我对ES6都不甚感兴致，一是因为在临盆环境中运用ES5已是到处受阻，其次则是只当这ES6是语法糖未曾注重。只是近来进修react生态，用起babel来转换jsx之余，也难免遇到诸多用上ES6的教程、案例，因而便稍作进修。这一进修，便以为这语法糖实在是甜，不由得尝鲜，因而纪录部份自发对自身有效的要领在此。

这是我数月前的一篇文章《ES6部份要领点评（一）》中的一段，现在再看我自身的代码，比比皆是ES6的语法。在当前的浏览器市场下，想在临盆环境用上ES6，Babel是必不可少的。

因为我自身只用了ES6的语法而未运用ES6的别的特征，因而本文只引见怎样运用webpack整合Babel来编译ES6的语法，而实际上若要运用ES6的别的属性以至是ES7（ES2016），实在只须要引入Babel别的的preset/plugin即可，在用法上并没有多大变化。

用到哪些npm包？

首先要说到的是babel-loader，这是webpack整合Babel的症结，我们须要设置好babel-loader来加载那些运用了ES6语法的js文件；换句话说，那些原本就是ES5语法的文件，实际上是不须要用babel-loader来加载的，用了也只会糟蹋我们编译的时刻。

然后就是babel相干的npm包，个中包含：

babel-core，babel的中心，没啥好说的。
babel-preset-es2015-loose，babel的preset（相称因而一整套plugin）。babel是有很多preset的，看自身须要来选用，比如说我尽管ES6（ES2016）语法的就能够用babel-preset-es2015或babel-preset-es2015-loose。这俩preset其有效法一样，差异就在于：

很多Babel的插件有两种形式：
尽量相符ECMAScript6语义的normal形式和供应更简朴ES5代码的loose形式。
长处：天生的代码能够更快，对老的引擎有更好的兼容性，代码平常更简约，越发的“ES5化”。
瑕玷：你是在冒险——随后从转译的ES6到原生的ES6时你会遇到题目。

我自身的斟酌是，肯定要更好的兼容性和更好的机能啦这还用想的吗？（敲黑板）

babel-plugin-transform-runtime和babel-runtime，这属于优化项，不必也没啥题目，下文会细说。

怎样设置babel-loader

babel-loader的设置并不庞杂，与别的loader并没有二致：

    {
      test: /\.js$/,
      exclude: /node_modules|vendor|bootstrap/,
      loader: 'babel-loader?presets[]=es2015-loose&cacheDirectory&plugins[]=transform-runtime',
    },

下面来细致诠释此设置：

test: /\.js$/表明我只用babel-loader来加载js文件，假如你只是小部份js文件运用了ES6，那末也能够给这些文件换个.es6的后缀名并把此处改成test: /\.es6$/。
exclude: /node_modules|vendor|bootstrap/，上文已说到了，不须要用babel来加载的文件照样剔撤除，否则会大批增添编译的时刻，平常我们只用babel编译我们自身写的运用代码。
loader: 'babel-loader?presets[]=es2015-loose&cacheDirectory&plugins[]=transform-runtime'，这一行是指定运用babel-loader并传入所需参数，这些参数实在也是能够经由过程babel设置文件.babelrc，不过我照样引荐在这里以参数的体式格局传入。下面来引见这些参数：

preset参数：`babel-preset-es2015-loose`

上文已诠释过preset是什么以及为啥要运用babel-preset-es2015-loose了，这里不再累述。

cacheDirectory参数

cacheDirectory参数默以为false，若你设置为一个文件目次途径（示意把cache存到哪），或是保存为空（示意操作体系默许的缓存目次），则相称于开启cache。这里的cache指的是babel在编译过程当中某些能够缓存的步骤，详细是什么我也不太清晰，反恰是只需开启了cache就能够加速webpack团体编译速率。我测试了一下，未开启cache的时刻我的脚手架项目(Array-Huang/webpack-seed)须要15秒半来编译；而开启cache后的第一次编译时刻并没有削减，第二次编译则变成14秒了，足足削减了1秒半了棒棒哒。

plugins参数

虽然说一个preset已包含N个plugin了，但总有一些漏网之鱼是要特地加载的。这里我只用到了transform-runtime，这个plugin的结果是：不必这plugin的话，babel会为每个转换后的文件（在webpack这就是每个chunk了）都增加一些辅佐的要领（仅在须要的情况下）；而假如用了这个plugin，babel会把这些辅佐的要领都集合到一个文件里一致加载一致管理，算是一个削减冗余，加强机能的优化项吧，用不必也看自身须要了；假如不必的话，前面也不须要装置babel-plugin-transform-runtime和babel-runtime了。

示例代码

诸位看本系列文章，搭配我在Github上的脚手架项目食用更佳哦（笑）：Array-Huang/webpack-seed(https://github.com/Array-Huang/webpack-seed)。

附系列文章目次（同步更新）