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 的插件直接處理 stream

gulp 執行的

    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';

//繼承Dao
class 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

有需要的交流的可以加個好友