Babel在ES6项目架构中的搭建与应用方案解析

前言

自从ES2015发布以来，所有的项目都转到了这一个标准，但是考虑到兼容性的问题，不得不对现有代码做一个转换，也就是说将ES6规范的代码转换到ES5的标准，保证项目不存在任何问题的情况下运行，有人会问，这不是多此一举吗，但是我想说ES6给开发带来的语法糖非常之多，足以吸引多数的技术决策者去尝试，此规范也大大提高了项目的可维护性和规范性，个人非常推崇，并且在项目中的应用稳定性也很高，如果你还没用使用，需要的话可以尝试一下。

那么今天就来详细介绍一个babel在我的项目中的使用，其实babel从某种意义上来讲推动了ES6标准的普及，让更多的开发人员能第一时间在浏览器不完全兼容的情况下体验这些完美的特性，Babel 是由插件组成，通过利用现有的插件或者开发你自己的插件可以组合出满足我们自身需要的转化管道。

Babel支持转换语法有JSX， ES6。

今天我们主要讲解一下如何在ES6项目架构中使用和架设Babel框架。

Babel命令安装使用

$ npm install -g babel-cli

简单解释一下-g 是全局安装，也可以用-global, 这样方便我们全局使用。

对于很多js工具都有这个命令操作，比如gulp webpack grunt 等等。

配置文件.babelrc

配置文件其实就是决定了我们在项目如何使用这个工具，举个例子比如gulp中gulpfile.js grunt中grunt.js等等。

所以Babel的配置文件是.babelrc，我们通常会把这个文件存放在项目的根目录下。

该文件的格式通常来讲是这个样子的：

{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装, 比如下面两个规则，是我在项目中经常用到的。

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

为了能让两个规则生效，需要安装两个依赖库：

$ npm install --save-dev babel-preset-es2015

$ npm install --save-dev babel-preset-react

基本使用

我们正常转换一个js文件：

$ babel myDemo.js

转码结果写入一个文文件 –out-file 或 -o 参数指定输出文件

$ babel myDemo.js --out-file myCompiled.js

或者，也可以用简写：

$ babel myDemo.js -o myCompiled.js

真正项目里我们不可能一个一个文件转换，所以需要整个目录转码

$ babel src -d lib

-d 参数指定输出目录

babel-core的应用

很多时候我们都会结合gulp等构建工具进行使用，这时候我们需要安装babel-core这个核心库：

npm install babel-core --save

下面是几个简单的示例：

var es6Code = 'let myArray.map(item.name = 'Richard')';
var es5Code = require('babel-core')
  .transform(es6Code, {
    presets: ['es2015']
  })
  .code;

浏览器自动转化代码

其实我们也可以在浏览器中直接使用browser.js对代码进行自动转换，但是现实项目很少会这样去做，因为多少会影响前端的性能问题。

具体使用方法：

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

结合Gulp进行使用

通常在项目中，我们会应用到Gulp , Grunt， webpack这一类的构建工具，下面我们来介绍一下如何在gulp中使用babel：

首先我们需要安装babelify:

sudo npm install babelify --save--only=dev

然后安装browserify,对模块化代码进行整合：

sudo npm install browserify --save--only=dev

安装preset:

sudo npm install babel-preset-es2015 --save--only=dev

整体代码示例：

var browserify   = require('browserify');
var babelify     = require('babelify');
var es2015 = require('babel-preset-es2015');


 var bundler = browserify({
    entries: '//your js file path',
    debug: true,
    cache: {},
    packageCache: {},
    fullPaths: true
  });

var transform = babelify.configure({
      ignore:  'bower_components',
      presets: [es2015]
    });

bundler.transform(transform);

当然babel的使用还不止于此，希望借此大家能不断的去摸索一下！