要让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. Solidity语言基础 和 Etherum ERC20合约基础

    1. 类型只能从第一次赋值中推断出来,因此以下代码中的循环是无限的,  小. for (var i = 0; i < 2000; i++) { ... } --- Solidity Types ...

  2. 解决video标签在微信中强制全屏、微信全屏播放(Android和IOS)

    在video标签中加上代码: x5-playsinline="true" webkit-playsinline="true" playsinline=" ...

  3. 统计sql

    查询统计信息 select * from user_tab_statistics t where t.TABLE_NAME=upper('tablename'); 查询表基本信息 select * f ...

  4. Linux系统安装过程

    一.安装VMware® Workstation 14 Pro,有一些安装时会出现virtual XT的错误,这需要重启电脑进入BIOS,开户虚拟加速开关:有些win8/10会出现虚拟网卡安装失败的情况 ...

  5. Pandas设置值

    1.创建数据 >>> dates = pd.date_range(', periods=6) >>> df = pd.DataFrame(np.arange(24) ...

  6. BZOJ 1874 取石子游戏 - SG函数

    Description $N$堆石子, $M$种取石子的方式, 最后取石子的人赢, 问先手是否必胜 $A_i <= 1000$,$ B_i <= 10$ Solution 由于数据很小, ...

  7. python基础之Day4

    流程判断 一.if 1.语法一 各条件都执行 if条件1: if条件2: if条件3: 2.语法二 if多分支,自上而下执行,一旦满足条件,后面代码即使满足条件也不会执行 if条件1: elif条件2 ...

  8. [Groovy] 创建Excel,追加Excel

    package ScriptLibrary import java.awt.Color import java.awt.GraphicsConfiguration.DefaultBufferCapab ...

  9. [Jmeter] 将参数从Jenkins传递给Jmeter

    Configuration in Jmeter Configuration in Jenkins

  10. Spring ApplicationContext(二)环境准备

    Spring ApplicationContext(二)环境准备 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) 本节介绍 ...