webpack多页应用架构系列（八）：教练我要写ES6！webpack怎么整合Babel？

时间 2019-11-05

标签 webpack 多页应用架构系列教练 es6 怎么整合 babel 栏目系统架构繁體版

原文原文链接

本文首发于 Array_Huang的技术博客—— 实用至上，非经做者赞成，请勿转载。
原文地址： http://www.javashuo.com/article/p-flwptlfi-ds.html
若是您对本系列文章感兴趣，欢迎关注订阅这里： https://segmentfault.com/blog/array_huang

前言

一直以来，我对ES6都不甚感兴趣，一是由于在生产环境中使用ES5已经是到处碰壁，其次则是只当这ES6是语法糖未曾重视。只是最近学习react生态，用起babel来转换jsx之余，也难免碰到诸多用上ES6的教程、案例，所以便稍做学习。这一学习，便以为这语法糖实在是甜，忍不住尝鲜，因而记录部分自觉对本身有用的方法在此。

这是我数月前的一篇文章《ES6部分方法点评（一）》中的一段，现在再看我本身的代码，触目皆是ES6的语法。在当前的浏览器市场下，想在生产环境用上ES6，Babel是必不可少的。javascript

因为我自己只用了ES6的语法而未使用ES6的其它特性，所以本文只介绍如何利用webpack整合Babel来编译ES6的语法，而实际上若要使用ES6的其它属性甚至是ES7（ES2016），其实只须要引入Babel其它的preset/plugin便可，在用法上并没有多大变化。css

用到哪些npm包？

首先要说到的是babel-loader，这是webpack整合Babel的关键，咱们须要配置好babel-loader来加载那些使用了ES6语法的js文件；换句话说，那些原本就是ES5语法的文件，实际上是不须要用babel-loader来加载的，用了也只会浪费咱们编译的时间。前端

而后就是babel相关的npm包，其中包括：java

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模式。node

优势：生成的代码可能更快，对老的引擎有更好的兼容性，代码一般更简洁，更加的“ES5化”。react

缺点：你是在冒险——随后从转译的ES6到原生的ES6时你会遇到问题。webpack

我本身的考虑是，确定要更好的兼容性和更好的性能啦这还用想的吗？（敲黑板）git

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

如何配置babel-loader

babel-loader的配置并不复杂，与其它loader并没有二致：es6

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

下面来详细解释此配置：github

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)。

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