前言
Babel是一个流行的JavaScript编译器，它可以将当前浏览器不支持的ECMAScript新特性转换成ES5代码。在前端开发中，我们经常会使用到Babel。Babel6是Babel的最新版本，同时也是Babel的一个重大升级。在Babel6中，一些API和配置选项得到了简化和优化，同时还对ES6的支持做了大幅度优化。
在本文中，我们将深入了解Babel6中babel-loader的使用方法，以及如何使用它将我们的ES6代码转换成可以在当前浏览器中运行的ES5代码。
什么是babel-loader
babel-loader是一个Webpack插件，它可以帮助我们将ES6、ES7或者其他类ES语言转换成ES5代码，并将其打包成一个或多个JavaScript文件。babel-loader通过Babel来进行编译，因此需要先安装Babel。
安装Babel6和babel-loader
在安装babel-loader之前，我们需要先安装Babel6。打开终端，输入以下命令进行安装：
npm install babel-core babel-loader babel-preset-es2015 --save-dev
以上命令会安装以下三个依赖项：
- babel-core: Babel的核心库，包含编译器和API。
- babel-loader: Babel的Webpack插件，在Webpack中使用。
- babel-preset-es2015: Babel的ES6预设，用于将ES6代码转换成ES5。
如果你是在全局环境下进行安装，则需要添加-g选项。安装完成后，我们就可以在项目中使用babel-loader了。
配置Webpack使用babel-loader
在webpack.config.js中我们需要添加以下配置内容使用babel-loader：
-- -------------------- ---- -------
------- -
-------- --
----- --------
-------- ---------------
------- ---------------
------ -
-------- ----------
-
-
-
-在以上代码中，我们使用了Webpack的module.loaders配置，实现对于.js文件的编译。其中，我们的目标文件为.js文件，排除了node_modules文件夹，使用了babel-loader进行编译处理。同时，我们使用了Babel的es2015预设。
以上配置的含义是，Webpack会将所有.js文件通过babel-loader进行处理，并在处理过程中使用es2015的预设进行编译，将ES6代码转换成ES5代码。
可以使用的配置选项
在查询中，你可以使用以下配置选项对babel-loader进行优化和调整：
- cacheDirectory: 当设置为true时，Babel会将每个文件的编译结果缓存到硬盘中，以便于下次使用。这样可以节省编译时间。
- babelrc: 当使用.babelrc文件时，可以指定为false来阻止babel-loader自动寻找和使用.babelrc文件。默认为true。
- presets: 用于指定需要使用的Babel预设。可以是一个字符串数组，如['es2015', 'stage-0']，也可以是一个对象，如{ presets: ['es2015'] }。
示例代码
让我们来看一个使用Babel6编写的箭头函数的示例代码：
let sum = (a, b) => {
return a + b;
}
console.log(sum(5, 6));在没有进行任何处理时，此段代码在低于IE9版本的浏览器中将无法运行。使用babel-loader和Babel6的es2015预设，我们将此代码转换成ES5代码：
"use strict";
var sum = function sum(a, b) {
return a + b;
};
console.log(sum(5, 6));可以看到，转换后的代码可以在任何浏览器中运行。
结论
在本文中，我们介绍了Babel6中babel-loader的使用方法，并提供了详细的配置和示例代码。使用babel-loader和Babel6，可以让我们方便地将现代的JavaScript代码转换成低版本浏览器可以运行的JavaScript代码。细心的读者也许会发现，Babel及babel-loader的应用范围不仅限于前端，它也可以用于后台的Node.js开发中。因此，学习babel-loader和Babel6的使用方法，对于前端和后台开发者而言都是非常有价值的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67301c10eedcc8a97c91188b