搭建babel将es6转es5环境

前言

babel 6与以前版本的区别：
以前版本只要安装一个babel就能够用了，因此以前的版本包含了一大堆的东西，这也致使了下载一堆没必要要的东西。但在babel6中，将babel拆分红两个包：
babel-cli和babel-core。若是你想要在CLI(终端或REPL)使用babel就下载babel-cli，若是想要在node中使用就下载babel-core。
babel 6已结尽量的模块化了，若是还用babel 6以前的方法转换ES6，它会原样输出，并不会转化，由于须要安装插件。

Babel提供 babel-cli工具，用于命令行转码。如下摘自 阮一峰。

它的安装命令以下。

$ npm install --global babel-cli

基本用法以下：

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

上面代码是在全局环境下，进行Babel转码。这意味着，若是项目要运行，全局环境必须有Babel，也就是说项目产生了对环境的依赖。另外一方面，这样作也没法支持不一样项目使用不一样版本的Babel。

一个解决办法是将babel-cli安装在项目之中。

$ npm install --save-dev babel-cli

而后改写package.json

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

转码时执行：

npm run build

若是某些代码须要调用Babel的API进行转码，就要使用 babel-core模块。如下摘自阮一峰。

它的安装命令以下。

$ npm install babel-core --save

而后，在项目中就能够调用babel-core。

var babel = require('babel-core');

// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }

// 文件转码（异步）
babel.transformFile('filename.js', options, function(err, result) {
  result; // => { code, map, ast }
});

// 文件转码（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

例子：

var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
  .transform(es6Code, {
    presets: ['es2015']
  })
  .code;
// '"use strict";\n\nvar x = function x(n) {\n  return n + 1;\n};'

上面代码中，transform方法的第一个参数是一个字符串，表示须要转换的ES6代码，第二个参数是转换的配置对象。
**

Demo：1.工具（gulp）转换法

项目目录结构：

① 在项目中安装 gulp执行：

npm install gulp --save-dev

② 安装转码规则：

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

此时的package.josn文件：

③ 编写gulpfile.js文件，文件内容以下所示：

var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default",function(){
    return gulp.src("js/a.js").pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest("lib"));
})

当咱们在当前项目目录下运行

gulp

命令后，会发现本来在src文件夹中的a.js(按照ES6标准编写的)文件已经被转码成ES5标准的a.js，并放在了lib文件夹里面。

可能报错和缘由

package.json文件不该该是空的。

若是你有空的包json文件，只需添加{}。

而后再试一次就行。
**

Demo：2.不使用工具

你得有.babelrc文件。Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。
该文件用来设置转码规则和插件，基本格式以下。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不一样阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

① 配置项目规则 以下：

② 选择前言中的方法，安装babel-cli包：

$ npm install --global babel-cli

③ 执行命令：

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel js -d lib

以后，你会看到js文件夹下的.js文件，所有转码到lib文件夹下，检查一下lib文件夹中的.js是否已经变为es5了。