开发者社区> 西游不取经> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 每一个程序员都有一颗全栈的心,node和es6满足了尤其是前端的憧憬。 node下用express框架,实现一个简单的mvc。
+关注继续查看

每一个程序员都有一颗全栈的心,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









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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
nodejs ES6模块使用 以及 ES6代码转CJS兼容性处理
nodejs ES6模块使用 以及 ES6代码转CJS兼容性处理
0 0
一文读懂前端模块化(CommonJS、AMD、CMD、UMD、ES6)
一文读懂前端模块化(CommonJS、AMD、CMD、UMD、ES6)
0 0
gulp开发简单配置以及配合browserify应用
前端开发都需要对css ,js 打包压缩,less 编译,gulp简单的风格,可以完美的完成这项任务。
694 0
如何用 Babel 和 Rollup 来构建和发布 ES6 模块
本文讲的是如何用 Babel 和 Rollup 来构建和发布 ES6 模块,ES2015 规范,也称作 ES6,早在2015年六月被 ECMA 国际(ECMA International)批准为正式标准。
1409 0
TypeScript学习笔记(一)TS介绍,环境安装与运行
TypeScript学习笔记(一)TS介绍,环境安装与运行
0 0
搭建es6开发与非开发环境babel-browser
搭建es6开发与非开发环境babel-browser
0 0
+关注
西游不取经
其实呢,我只是一个前端
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于webpack和npm的前端组件化实践
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
编程语言如何演化-以JS的private为例
立即下载