每一個程序員都有一顆全棧的心,node和es6滿足了尤其是前端的憧憬。
node下用exPRess框架,實(shí)現(xiàn)一個簡單的mvc。當(dāng)然用es6編程就涉及到es6到es5的轉(zhuǎn)換。即使是node6 對es6實(shí)現(xiàn)了百分之九十四的支持也有那么一點(diǎn)沒有實(shí)現(xiàn),比如import等,所有就需要轉(zhuǎn)換,用babel
安裝babel
npm install babel-core -g或者npm install --save-dev babel-core在安裝npm install --save-dev babel-preset-es2015當(dāng)然有babel-preset-es2016 但是 使用 2016是 運(yùn)行babel-node 就有有錯誤 improt 不支持
還是老實(shí)的用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();如此就能正確輸出了,當(dāng)然最好需要轉(zhuǎn)換成es5運(yùn)行命令 babel
babel ./src --out-dir ./core也可以放到
package.json 里
"scripts": { "build": "babel --watch=./src --out-dir ./core", "start": "node ./bin/www" },運(yùn)行npm run build這樣做是很費(fèi)勁的要是有文件新建或者修改,就要再次運(yùn)行,最好的還是加入gulp對文件進(jìn)行監(jiān)聽就好了,自動轉(zhuǎn)換。
babel也有watch命令 測試發(fā)現(xiàn)對文件 目錄不起作用,需要準(zhǔn)的文件,如
babel --watch=./src/test.js --out-dir ./core開發(fā)需要用到的工具
"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'), //監(jiān)聽 plumber = require('gulp-plumber'), //錯誤管理 提示 sourcemaps = require('gulp-sourcemaps'), strip = require('gulp-strip-comments'), //刪除注釋 streamify = require('gulp-streamify'), //只支持 buffer 的插件直接處理 streamgulp 執(zhí)行的path = { src: { js: 'src/**/*.js' }, dist: { js: "core/" } };gulp.task('6to5', function () { gulp.src(path.src.js) // 多個文件目錄 參數(shù)為數(shù)組 .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));});運(yùn)行g(shù)ulp watchnode
gulp.task('watchnode', ['6to5'], function (){ gulp.watch([path.src.js], [babel]);});生成對應(yīng)文件如下:
這樣就可以暢爽的寫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;對用戶操作 UserDaoimport 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(); //實(shí)例化UserDaorouter.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); });});轉(zhuǎn)換后的BaseDao
新聞熱點(diǎn)
疑難解答