老树新芽,在ES6下使用Express
要让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 build
和npm 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的更多相关文章
- node.js 下依赖Express 实现post 4种方式提交参数
上面这个图好有意思啊,哈哈, v8威武啊.... 在2014年的最后一天和大家分享关于node.js 如何提交4种格式的post数据. 上上一篇说到了关于http协议里定义的4种常见数据的post方法 ...
- Node.js在任意目录下使用express命令‘不是内部或外部命令’解决方法
1.一开始我只能在nodejs全局目录下使用express命令建一个新的项目,建在其他任意一个目录命令行都会提示"不是内部或外部命令",导致目录会乱,目录如下. 2.尝试了一会,发 ...
- windows下nodejs express安装及入门网站,视频资料,开源项目介绍
windows下nodejs express安装及入门网站,视频资料,开源项目介绍,pm2,supervisor,npm,Pomelo,Grunt安装使用注意事项等总结 第一步:下载安装文件下载地址: ...
- ES6下的Function.bind方法
在JavaScript的使用中,this的指向问题始终是一个难点.不同的调用方式,会使this指向不同的对象.而使用call,apply,bind等方式,可改变this的指向,完成一些令人惊叹的黑魔法 ...
- Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室
一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...
- ARM模式下创建Express Route
在Azure的ARM模式下,创建Express Route的命令和ASM模式下是有一些区别的. 本文将介绍在ARM模式下,如果创建Express Route的Circuit. 1. 查看支持的Serv ...
- 在Node.js环境下使用Express创建Web项目实例
序:如果你还不知道Node.js是什么,那么你可以先看看这篇:Node.js 究竟是什么?或者任何关于它的介绍. 一.安装Node.js 1.进入Node.js官网下载并安装 2.启动cmd输入命令查 ...
- Node.js环境下通过Express创建Web项目
通过Express命令创建项目 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express ...
- es6下 vue实例属性template不能使用
esm模式下 不能使用template,需要引入非esm的vue.js,查看vue源码的包的dist目录下 文件标有esm是支持ems,没有标记,就是不支持(这个知识,怎么说了,应该属于webpack ...
随机推荐
- 在textarea中鼠标指定的位置插入字符或表情
有些时候我们已经在textarea中输入了一些字符,然后想在鼠标指定的位置插入表情或者字符,这就需要用到jquery的一个小插件了. 代码如下: (function ($) { $.fn.extend ...
- centos 命令学习
关机&重启 shutdown -h 10 #计算机将于10分钟后关闭,且会显示在登录用户的当前屏幕中 shutdown -h now #计算机会立刻关机 shut ...
- 已经卸载了hyper-v 仍然提示 vmware 与 hyper-v 不兼容;天天模拟器,提示VT模式没有开启,BIOS里面已经设置过了
环境win10,vm的失败和模拟器的失败都是hyper-v冲突导致的...网上看了很多千篇一律的都只是提到了卸载hyper-v,实际上我电脑仅仅卸载hyper-v是不够的. 解决办法: 卸载 hype ...
- Jenkins构建.net项目
一.环境搭建 1.安装所需软件 Jenkins\JDK\GIT\VS\IIS\nginx(可选) 1.1 安装iis服务: 控制面板—>程序和功能—>启用或关闭windows功能,勾选所有 ...
- 17.Mysql分区
17.Mysql分区分区是指根据一定的规则把一个表分解成多个部分,逻辑上仍是一张表,实际上由多个物理分区对象组成.分区对于应用是完全透明的,不影响业务逻辑和SQL编写.分区的优点: 可以存储更多的数据 ...
- DOM系列基础知识
DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改 ...
- Android开发之利用ViewPager实现在Activity或Fragment中引入别的布局文件实现滑动并进行页面跳转
有些时候经常可以看到其他APP中有一排的图标,可以在一个界面中滑来滑去,并且图标可以进行点击事件进行页面的跳转.这里对这种方法的实现做出总结. 首先看一下图片: 下面这两种图片是在一个Fragment ...
- 839A Arya and Bran
A. Arya and Bran time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- svn conflict问题解决办法
转自:http://www.cnblogs.com/aaronLinux/p/5521844.html 目录: 1. 同一处修改文件冲突 1.1. 解决方式一 1.2. 解决方式二 1.3. 解决总结 ...
- GitHub上README.md教程 详情介绍 (修改图片连接地址错误)
最近对它的README.md文件颇为感兴趣.便写下这贴,帮助更多的还不会编写README文件的同学们. README文件后缀名为md.md是markdown的缩写,markdown是一种编辑博客的语言 ...