每一个程序员都有一颗全栈的心，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
有需要的交流的可以加个好友
