nodejs下用es6编程babel和gulp的配合应用

每一个程序员都有一颗全栈的心，node和es6满足了尤其是前端的憧憬。

node下用exPRess框架，实现一个简单的mvc。当然用es6编程就涉及到es6到es5的转换。即使是node6 对es6实现了百分之九十四的支持也有那么一点没有实现，比如import等，所有就需要转换，用babel

安装babel

npm install  babel-core -g或者npm install --save-dev babel-core在安装
npm install --save-dev babel-preset-es2015当然有babel-preset-es2016 但是 使用 2016是 运行babel-node  就有有错误 improt 不支持
还是老实的用2015
需要在目录下面被子.babelrc 文件
{  "presets": ["es2015", "stage-0"]}stage-0 有 0， 1， 2， 3  。stage-0包含了后面3个
class Base {    base() {        console.log(23);    };}module.exports = Base;import Base from './Base';class app extends Base {    son () {        this.base()    }}var a = new app();a.son();如此就能正确输出了，当然最好需要转换成es5
运行命令 babel 
babel ./src --out-dir ./core
也可以放到
package.json 里
"scripts": {    "build": "babel --watch=./src --out-dir ./core",    "start": "node ./bin/www"  },运行npm run build
这样做是很费劲的要是有文件新建或者修改，就要再次运行，最好的还是加入gulp对文件进行监听就好了，自动转换。
babel也有watch命令 测试发现对文件 目录不起作用，需要准的文件，如
babel --watch=./src/test.js --out-dir ./core
开发需要用到的工具
  "devDependencies": {    "babel-cli": "^6.22.2",    "babel-preset-es2016": "^6.22.0",    "babel-preset-stage-0": "^6.22.0",    "browserify": "^14.0.0",    "gulp": "^3.9.1",    "gulp-babel": "^6.1.2",    "gulp-plumber": "^1.1.0",    "gulp-sourcemaps": "^2.4.0",    "gulp-streamify": "^1.0.2",    "gulp-strip-comments": "^2.4.3",    "gulp-watch": "^4.3.11",    "vinyl-source-stream": "^1.1.0"  }
var gulp = require('gulp'),    babel = require('gulp-babel'),    watch = require('gulp-watch'),  //监听    plumber = require('gulp-plumber'),  //错误管理 提示    sourcemaps = require('gulp-sourcemaps'),    strip = require('gulp-strip-comments'), //删除注释    streamify = require('gulp-streamify'),  //只支持 buffer 的插件直接处理 streamgulp 执行的
    path = {        src: {            js: 'src/**/*.js'        },        dist: {            js: "core/"        }    };gulp.task('6to5', function () {    gulp.src(path.src.js)  // 多个文件目录  参数为数组        .pipe(watch(path.src.js))        .pipe(plumber())        .pipe(sourcemaps.init())        .pipe(strip())  //去除注释        .pipe(streamify(babel()))        .pipe(sourcemaps.write({addComment: false}))          .pipe(plumber.stop())          .pipe(gulp.dest(path.dist.js));});
运行gulp watchnode 
gulp.task('watchnode', ['6to5'], function (){    gulp.watch([path.src.js], [babel]);});生成对应文件如下：
这样就可以畅爽的写es6了
BaseDao
import connect from '../../config/connect';class BaseDao {    //查询    query(field, col, callback) {        connect.open(function(err, db) {                  });    }    //保存 新建    save(field, col, callback) {        connect.open(function(err, db) {        });    }}module.exports = BaseDao;对用户操作 UserDao
import nodeUtil from 'util';import connect from '../../config/connect';import BaseDao from './BaseDao';import user from '../models/User';//继承Daoclass UserDao extends BaseDao {      //获取用户信息 登录等    getUser(user, callback) {        this.query(user, 'users', callback);    }    //普通用户注册    setUser (user, callback) {        this.saveUser(user, 'users', callback);    }}module.exports = UserDao;
route 路由 routes.js
import express, { Router } from 'express';import csurf from 'csurf';import util  from '../lib/util';import UserDao from '../dao/UserDao';const router = Router();const userDao = new UserDao(); //实例化UserDao
router.post('/reg', function(req, res) {    let pwd = util.mix(req.body.pwd);    let User = {        email: req.body.name,        pwd: pwd    }    userDao.setUser(User, function(err, user){        console.log(err);    });});转换后的BaseDao