最近准备把很久以前一直想做的一个TCG做出来,借这个项目练习前端和后端,也顺便把开发的过程都记录下来造福后人。
经过几天的查询,准备前端用ReactJS,后端用Node.js(KOA),Socket.io,MySQL。
之前准备使用NoSQL的数据库,但Redis对Windows平台的支持不好,MongoDB必须手写事务,所以还是决定用MySQL。
以上每种技术都几乎处于没学过的状态,所以等于是从零开始。这样也可以当作一个Tutorial。
首先去 https://nodejs.org/en/ 下载node.js,我下载了V4.4版。
Koa在 https://github.com/koajs/koa 这里,
我准备使用Koa V2,用 npm install koa@2 --save 安装。在说明中,有一段示例代码,我们将其简化一下:
import Koa from 'koa'
const app = new Koa(); app.use(async (ctx, next) => { ctx.body = "Hello world!" });
如果直接把这段代码复制下来写到一个index.js文件里,再执行node index.js,一定会报错。
因为这段代码使用的import, async, 箭头函数,new等写法,都属于ES6,我下载的这个版本的NODE只支持ES5,所以需要一个工具对代码进行转换。
这个工具就是Babel,先在工程目录下安装
npm install babel-cli --save-dev
npm install babel-preset-2015 --save-dev
npm install babel-register --save-dev
npm install babel-preset-stage-3 --save-dev
npm install babel-polyfill --save
在工程目录下新建.babelrc文件(在windows中,这个文件名是非法的,解决方法是在后面再加一个.),并配置好Babel的转换规则:
{
"presets": ["es2015", "stage-3"]
}
现在,在工程目录下可以执行 node_modules\.bin\babel -d lib/ src/
从而把src目录下所有的ES6代码转换成ES5并存放到lib中,这样就可以通过 node lib/index.js执行了,然而还是会报错。
因为转换后的代码需要require('babel-polyfill'); 才能正常执行,打开lib/index.js加上这一句,就可以了。
这样每次都要重新转换,当然非常麻烦,好在有babel-register这个插件。
将index.js放在src目录下,并在工程目录中新建run.js
require ('babel-polyfill');
require ('babel-register');
require ('./src');
在require('babel-register');之后,就会自动将剩下的代码转换成ES5并直接执行了。
node run.js 之后,用浏览器打开localhost:3000,就可以看到Hello world