让 express 通过 webpack 支持 es6/es7

在 webpack 的热替换, 让 es6/es7 开发速度真正达到编码如飞.

项目地址: https://github.com/TheOne1006...

启发

在 react 开发中, 需要 github 中许多模板都是 webpack 支持的热替换.
在https://github.com/kriasoft/r... 项目中, 我看到了让 express 也能够像 开发前端一样, 也能够使用 es6 语法,并且快速的转译 es6.

github 中也有 https://github.com/babel/exam... ,
也可以让 babel 转换成 es5.
但是也在开发环境下, 无法快速的编译,因为 babel 会把所有文件转换一遍.而且生产环境下依然需要 babel-cli

简单的开始

NOTE: 安装环境需要 Yarn 和 Node.js v6.5 以上.
PS: 其他环境没有试过.

1.获取项目

$ git clone https://github.com/TheOne1006/es6-express.git MyApp
$ cd MyApp

2.Run yarn install

这条命令将会安装所有 package.json 中的项目依赖和开发工具列表.

3.Run yarn start

这条命令将 通过 (/src) 里的所有源文件构建 应用 到 (/build) 目录.
一旦初始构建完成, 它将启动 Node.js 服务(node build/server.js).

完成构建后将会启动三个端口,默认为

1. localhost:3000 -- Node.js 服务 (build/server.js)

2. localhost:3001 -- BrowserSync 代理

3. localhost:3002 -- BrowserSync 管理界面

完成后会自动打开,浏览器并访问 localhost:3001

这时可以修改 src/* 中的代码, 在控制台即可看见更新的进程.
相对于使用 nodemon babel-node 检测更新快了许多.
同时在代码中也可以使用 async 等 es6/es7 的语法.