浅析babel

babel是目前es6转es5的主流工具，有了babel咱们能够在node端、浏览器端使用es6的语法；

在不一样环境中使用babel

　　平常开发工做中，经常会在命令行模式下使用babel，或者在构建工具中使用babel

　　1.项目中使用babel,不借助构建工具  [局部安装cli]

　　　　这里不使用全局安装babel-cli,缘由:不能在各个工程中使用不一样版本的babel

            第一步: 在项目根目录下建立package.json

　　　　第二步: 局部安装babel-cli

sudo npm install babel-cli --save-dev

　　　　第三步: 局部安装转码规则 以及 配置文件

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

　　　　在工程根目录下建立.babelrc文件,并在文件中配置参数

 {
    "presets": [
      "es2015", //配置安装的转码规则 es2015
      "react",
      "stage-2"
    ],
    "plugins": []
  }

　　　　第四步: 在package.json文件中修改配置  以及 执行命令

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d dest" //-d表示转码整个文件夹
  },
}

　　　　在项目根目录下执行  npm run bulid 即执行转码命令 参见 npm run 

npm run bulid

 

 　　2.命令行中使用babel  [全局安装cli]

　　　　若是全局安装babel命令行 babel-cli，在项目工程中就不须要使用配置package.json文件并执行npm run命令

　　　　全局安装babel-cli就能够在项目工程中直接使用babel命令

//第一步： 全局安装babel-cli 
sudo npm install babel-cli -g 

//第二步： 在项目工程中局部安装转码规则 以及 配置.babelrc文件
sudo npm install babel-preset-es2015 --save-dev

在项目工程根目录下建立一个.babelrc文件，并配置规则，与局部安装配置相同

//第三步： 在项目工程下使用babel命令
babel src -d dest 

 

　　3.构建工具中使用babel插件（以gulp为例）

　　　　在构建工具grunt、gulp中使用babel的方法基本相同，这里讲解gulp中的使用；首先要安装gulp封装好的babel编译器 gulp-babel 以及 转码规则 babel-preset-es2015;

sudo npm install gulp-babel babel-preset-es2015

　　　　安装好babel编译器和转码规则后，建立任务；

　　　　能够参考gulp-babel文档，具体以下：

const gulp = require('gulp');
const babel = require('gulp-babel');
 
gulp.task('default', () => {
    return gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'));
});

 

babel5 && babel6差别

　　

 (未完待续)

参考：

[1] babel入门教程

[2] babel5升级到babel6总结