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

gnehc 发布于2019-08-20 11:14 / 2162人阅读

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。只是最近学习生态，用起来转换之余，也不免碰到诸多用上的教程案例，因此便稍作学习。在当前的浏览器市场下，想在生产环境用上，是必不可少的。

本文首发于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)。

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

webpack多页应用架构系列（一）：一步一步解决架构痛点：https://segmentfault.com/a/1190000006843916

webpack多页应用架构系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多页应用架构系列（三）：怎么打包公共代码才能避免重复？：https://segmentfault.com/a/1190000006871991

webpack多页应用架构系列（四）：老式jQuery插件还不能丢，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多页应用架构系列（五）：听说webpack连less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多页应用架构系列（六）：听说webpack连图片和字体也能打包？:https://segmentfault.com/a/1190000006907701

webpack多页应用架构系列（七）：开发环境、生产环境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多页应用架构系列（八）：教练我要写ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多页应用架构系列（九）：总有刁民想害朕！ESLint为你阻击垃圾代码:https://segmentfault.com/a/1190000007030775

webpack多页应用架构系列（十）：如何打造一个自定义的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多页应用架构系列（十一）：预打包Dll，实现webpack音速编译:https://segmentfault.com/a/1190000007104372

webpack多页应用架构系列（十二）：利用webpack生成HTML普通网页&页面模板:https://segmentfault.com/a/1190000007126268

webpack多页应用架构系列（十三）：构建一个简单的模板布局系统:https://segmentfault.com/a/1190000007159115

webpack多页应用架构系列（十四）：No复制粘贴！多项目共用基础设施

webpack多页应用架构系列（十五）：论前端如何在后端渲染开发模式下夹缝生存

webpack多页应用架构系列（十六）：善用浏览器缓存，该去则去，该留则留

本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。
原文地址：https://segmentfault.com/a/1190000006992218
如果您对本系列文章感兴趣，欢迎关注订阅这里：https://segmentfault.com/blog/array_huang

服务器托管混合云 webpack _webpack webpack cdn webpack2

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80468.html

webpack多页应用架构系列（九）：总有刁民想害朕！ESLint为你阻击垃圾代码

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。如果你使用了，或类似的，那么，通过编译前后的代码相差就很大了，这会造成两个问题以为例把你的代码转成什么样你自己是无法控制的，这往往导致无法通过的审查。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007030775如果您...

dingding199389 2019-08-20 11:20 评论0 收藏0
webpack多页应用架构系列（一）：一步一步解决架构痛点

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里这系列文章讲什么本系列文章主要介绍如何用这一当前流行的构建工具来设计一个多页应用的架构。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006843916如果您对本系列文章...

Lowky 2019-08-20 10:50 评论0 收藏0
webpack多页应用架构系列（三）：怎么打包公共代码才能避免重复？

摘要：在上一篇文章多页应用架构系列二配置常用部分有哪些中，我介绍了如何配置多页应用的入口，然而，如果仅仅如此操作，带来的后果就是，打包生成出来的每一个入口文件都会完整包含所有代码。的初始化常用参数有哪些，给这个包含公共代码的命个名唯一标识。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190...

oliverhuang 2019-08-22 10:37 评论0 收藏0
webpack多页应用架构系列（十）：如何打造一个自定义的bootstrap

摘要：我个人惯用的是，因此本文以为例来介绍如何打造一个自定义的。引入全局的方法请看我之前的这篇文章多页应用架构系列四老式插件还不能丢，怎么兼容，我的脚手架项目也是使用的这套方案。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007043716如果您对本系列文章感兴趣，欢迎关注订阅...

jindong 2019-08-20 11:24 评论0 收藏0
webpack多页应用架构系列（十一）：预打包Dll，实现webpack音速编译

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里前言书承上文多页应用架构系列十如何打造一个自定义的。终于，发现了这一大杀器，打包时间过长的问题得到完美解决。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000710437...

sixleaves 2019-08-20 11:33 评论0 收藏0