第十三节、给webpack增加babel支持

现在前端开发都开始使用ES6的语法了。当然webpack3增加了一些ES6的转换支持，但是在项目中添加babel-loader配置会方便我们的开发。

Babel是什么？

babel是一个编译JavaScript的平台，它的强大之处表现值可以帮你达到以下目的：

• 使用下一代的javascript代码（ES6\ES7），即使这些标准目前并未被当前的浏览器完全支持。
• 使用基于jacascript进行了扩展的语言。

Babel的安装与配置

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

我们先一次性的安装这些依赖包

cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react  --save-dev

webpack中的配置如下：

{    test:/\.(jsx|js)$/,    use:[{        loader: "babel-loader",        options: {            presets:['es2015','react']        }    }],    exclude:/node_modules/}

现在可以使用webpack转换ES6的语法兼容各个浏览器了，修改一下entry.js的代码如下：（这里之前是有两个入口文件entyr2.js和entry.js,有点麻烦我就把entry2.js删了，删除的时候记得把webpack.congfig.js中的接入口文件entry2.js也删了）

entry.js

import css from '../css/index.css';document.getElementById('title').style.color='red';let jspangString = 'Hello Webpack'document.getElementById('title').innerHTML=jspangString;

上面代码使用了ES6的let声明方法，配置完成后进行打包你会发现dist文件夹下的entry.js是这样的，它试了babel进行代码的转换。

var jspangString = 'Hello Webpack';document.getElementById('title').innerHTML = jspangString;

.babelrc

---

在项目根目录新建.babelrc文件，并把配置写到文件里。（在这个地方我卡了好久，因为是看教程，没有具体的实例，我一开始以为这是个js文件，然后配置好了以后怎么都无法实现babel代码转换，搜了好久发现是个json格式的文件，我用的是webstorm编辑器，其他编辑器应该也可以，你直接在根目录下建立.babelrc文件就可以了，记住是最前边有个点的）

{  "presets":["es2015","react"]}

这里webpack.config.js中loader配置就要改一下了

{    test:/\.(jsx|js)$/,    use:[{        loader: "babel-loader"    }],    exclude:/node_modules/}

ENV

---

现在网络上已经不流行babel-preset-es2015，现在官方推荐使用的是babel-preset-env,那我们为了紧跟潮流，我们在讲一下env的配置方法。

首先安装依赖包：

cnpm install babel-preset-env --save-dev

然后修改.babelrc里的配置文件。其实只要把之前的es2015换成env就可以了。

{  "presets":["env","react"]}

总结：对于这里的React中Babel的使用，是解析JSX的，在实际工作中安装Babel的，这样能更好的兼容每种浏览器，而把Babel的配置文件分解出来是最好的选择。