要让Express在ES6下跑起来就不得不用转码器Babel了。首先新建一个在某目录下新建一个项目。然后跳转到这个目录下开始下面的操作。

简单走起

安装babel-cli

$ npm install --save-dev babel-cli

然后,可以安装一些presets

$ npm install --save-dev babel-preset-es2015 babel-preset-stage-2

现在就应该安装express

$ npm install --save express

再创建一个我们要运行的index.js

$ touch index.js

添加如下代码

import Express from 'express';

let app = Express();

app.get('/', (req, res) => {
res.send(`hello world!`);
}); app.listen(4321, () => {
console.log('server running http://localhost:4321');
});

package.json里添加运行的脚本

"scripts": {
+ "start": "babel-node index.js --presets es2015,stage-2"
}

现在开始运行我们的server。

$ npm start

你现在就可以在http://127.0.0.1:4321下看到hello world了。

使用nodemon监视文件修改

我们可以修改npm start,添加对nodemon的引用。

$ npm install --save-dev nodemon

修改脚本。

"scripts": {
- "start": "babel-node index.js"
+ "start": "nodemon index.js --exec babel-node --presets es2015,stage-2"
}

运行server

$ npm start

你现在就可以修改index.js,而且因为有了nodemon我们的server会在修改发生后自动重启。

在server还在运行的时候,修改index.js,把hello world改成YO YO YO!。然后刷新页面,你就会看到页面内容已经是YO YO YO!了。

准备生产环境

使用babel-node只是可以让server运行起来,但是还不能上产品环境。

我们需要预编译我们的代码,那么现在就来开始准备上生产。

首先把index.js文件移到lib/index.js

$ mv index.js lib/index.js

接下来修改npm start脚本。

"scripts": {
- "start": "nodemon index.js --exec babel-node --presets es2015,stage-2"
+ "start": "nodemon lib/index.js --exec babel-node --presets es2015,stage-2"
}

这还不够,还需要添加两个task npm run buildnpm run server

"scripts": {
"start": "nodemon lib/index.js --exec babel-node --presets es2015,stage-2",
+ "build": "babel lib -d dist --presets es2015,stage-2",
+ "serve": "node dist/index.js"
}

现在就可以使用npm run build累预编译了。npm run server可以在产品环境启动server。

$ npm run build
$ npm run server

这样我们就可以很快的重启server而不需要等着babel预编译文件。

刚刚新添加了dist目录,这个目录需要排除在git之外。所以给.gitignore文件添加dist

$ touch .gitignore
dist

这样就确保不会一不小心把gist的文件上传了。

把Babel选项保存到.Babelrc中

$ touch .babelrc

添加如下的配置。

{
"presets": ["es2015", "stage-2"],
"plugins": []
}

现在就可以在npm脚本里去掉那些多余的选项了。

  "scripts": {
+ "start": "nodemon lib/index.js --exec babel-node",
+ "build": "babel lib -d dist",
"serve": "node dist/index.js"
}

测试server

最后我们需要 保证server经过了严格的测试。

安装mocha

$ npm install --save-dev mocha

test/index.js里创建测试代码。

$ mkdir test
$ touch test/index.js
import http from 'http';
import assert from 'mocha'; import '../lib/index.js'; describe('Example Node Server', () => {
it('should retur 200', done => {
http.get('http://127.0.0.1:4321', res => {
assert.equal(200, res.statusCode);
done();
});
});
});

接下来安装babel-register

$ npm install --save-dev babel-register

然后添加npm test脚本。

  "scripts": {
"start": "nodemon es6_express_app.js --exec babel-node",
"build": "babel lib -d dist",
"server": "node dist/index.js",
+ "test": "mocha --compilers js:babel-register"
}

现在来运行测试。

$ npm test

你会看到下面的内容。

server running http://localhost:4321
Example Node Server
✓ should return 200 (61ms) 1 passing (85ms)

OK,全文完!

参考:example-node-server更多的资源也在这个repo下。

老树新芽,在ES6下使用Express的更多相关文章

  1. node.js 下依赖Express 实现post 4种方式提交参数

    上面这个图好有意思啊,哈哈, v8威武啊.... 在2014年的最后一天和大家分享关于node.js 如何提交4种格式的post数据. 上上一篇说到了关于http协议里定义的4种常见数据的post方法 ...

  2. Node.js在任意目录下使用express命令‘不是内部或外部命令’解决方法

    1.一开始我只能在nodejs全局目录下使用express命令建一个新的项目,建在其他任意一个目录命令行都会提示"不是内部或外部命令",导致目录会乱,目录如下. 2.尝试了一会,发 ...

  3. windows下nodejs express安装及入门网站,视频资料,开源项目介绍

    windows下nodejs express安装及入门网站,视频资料,开源项目介绍,pm2,supervisor,npm,Pomelo,Grunt安装使用注意事项等总结 第一步:下载安装文件下载地址: ...

  4. ES6下的Function.bind方法

    在JavaScript的使用中,this的指向问题始终是一个难点.不同的调用方式,会使this指向不同的对象.而使用call,apply,bind等方式,可改变this的指向,完成一些令人惊叹的黑魔法 ...

  5. Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室

    一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...

  6. ARM模式下创建Express Route

    在Azure的ARM模式下,创建Express Route的命令和ASM模式下是有一些区别的. 本文将介绍在ARM模式下,如果创建Express Route的Circuit. 1. 查看支持的Serv ...

  7. 在Node.js环境下使用Express创建Web项目实例

    序:如果你还不知道Node.js是什么,那么你可以先看看这篇:Node.js 究竟是什么?或者任何关于它的介绍. 一.安装Node.js 1.进入Node.js官网下载并安装 2.启动cmd输入命令查 ...

  8. Node.js环境下通过Express创建Web项目

    通过Express命令创建项目 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express ...

  9. es6下 vue实例属性template不能使用

    esm模式下 不能使用template,需要引入非esm的vue.js,查看vue源码的包的dist目录下 文件标有esm是支持ems,没有标记,就是不支持(这个知识,怎么说了,应该属于webpack ...

随机推荐

  1. pthreads v3下的worker和pool的使用

    有些人会想,明明用thread已经可以很好的工作了,为什么还要搞个worker和pool? 之所以要用到worker和pool还是因为效率,因为系统创建一个新线程代价是比较昂贵,每个创建的线程会复制当 ...

  2. VML、SVG、Canvas简介

    1.VML: VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是被IE支持. ...

  3. visio2013专业版激活密匙

    Visio 2013最新产品密钥分享,在安装时可以使用以下密钥: 2NYF6-QG2CY-9F8XC-GWMBW-29VV8 FJ2N7-W8TXC-JB8KB-DCQ7Q-7T7V3 VXX6C-D ...

  4. sqlserver中对于特定数据字段定义特定的数据类型

    char和varchar:汉字占两个字节,英文.数字或字符占一个 比如: 性别:男   女 可以定义为:char(2)或者是varchar(2)    因为性别是中文,中文占两个字节 nchar和nv ...

  5. sql:inner join,left join,right join,full join用法及区别

    join的语法: select [字段] from [表名1] inner/left/right/full join [表名2] on [表名1.字段1] <关系运算符> [表名2.字段2 ...

  6. DevExpress之TreeList节点绑定图片

    最近在项目中使用到了DX中的TreeList控件绑定数据源时在每个节点前显示特点的图片:查阅相关资料实现方法如下:1.首先打开VS2010新建一个WINFROM应用程序: 2.在WINFROM应用程序 ...

  7. hdu 5692(dfs+线段树) Snacks

    题目http://acm.hdu.edu.cn/showproblem.php?pid=5692 题目说每个点至多经过一次,那么就是只能一条路线走到底的意思,看到这题的格式, 多个询问多个更新, 自然 ...

  8. 多字节字符集与Unicode字符集

    在计算机中字符通常并不是保存为图像,每个字符都是使用一个编码来表示的,而每个字符究竟使用哪个编码代表,要取决于使用哪个字符集(charset). 多字节字符集: 在最初的时候,Internet上只有一 ...

  9. qt 5.2.1类和模块的关系图

    QT│  ├─ActiveQt│  │  ActiveQt│  │  ActiveQtDepends│  │  ActiveQtVersion│  │  QAxAggregated│  │  QAxB ...

  10. PS制作纸质复古野外露营插画分享

    经常有人说一些复古风,就觉得蛮难,其实制作过程其实没有想象中复杂,从1850年到2017年,通过这160多年里的平面设计,给我们的作品添加上一些新鲜的灵感和活力,本次教程就来教大家用PS做出耐看的纸质 ...