前言
自走棋这个东西那是真香，作为玩家来说，好的游戏自然是好的，可是作为一个研发，尤其是前端来说，那么当然想了解其背后的原理，以至于自己写一个出来，于是这一系列的文章就出来了。
此系列文章主要用来记录在开发TFT中遇到的困难和一些容易产生错误的点位，主旨在于提高自身能力和与广告自走棋爱好者（研发）分享。
GitHub地址如下：github.com/RexkentZhen…
第一周
总的来说，第一周主要是构建开发环境，没想到这东西竟然花了一周的时间。
下面是遇到的问题
Github账户的问题
为了为了项目的分开，使用没有使用本地的账号，而是另外一个账号，但是在这里遇到了问题，需要在文件夹目录下设置Git账号，操作如下：
git config user.name “gitlab’s Name”
git config user.email "gitlab@xx.com"
设置完成后使用下面的指令查看账户信息：
git config --list
Yoeman这个坑货
这玩意儿真的是大坑，感觉很多年都么有更新了，并且状态管理工具的选项很少，比方说这里使用的mobx就没有，所以还得自己一点点构建，构建的时候发现Yeoman的版本太老了，根本就不支持，这害的我又是一顿操作猛如虎的更新，结果你猜发生了什么？
热加载坏了，这就十分尴尬了，因为更新的别的东西导致热加载组件也得使用最新的，然后新的组件配置方式还和之前的不一样，需要在router外包裹一层，这可是让我一顿好找：
// routes.js
import { hot } from 'react-hot-loader/root';
function Routers() {
return (
...
);
}
export default hot(Routers);
后来发现这东西还是不好使，react-hot-loader有时候还是会出现更新无法加载的时候，也不知道是为什么，之后找到了另外一个插件react-transform-hmr，这个插件就好用了很多，简单的配置之后就可以使用了，在.babelrc文件中配置一下即可：
"env": {
"development": {
"plugins": [
"transform-decorators-legacy",
"react-hot-loader/babel",
["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"],
["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]
]
}
}
一步到位，根本不需要用hot去包裹什么东西那样复杂。
Webpack配置跨域
原以为Vue中有跨域的配置，React中也会有类似的，结果并没有，这就有点尴尬了，于是找到了Webpack配置跨域的方法，索性用的Webpack版本比较高，而且脚手架中也集成了webpack-dev-server，所以直接进行配置。
在cfg/dev.js文件中增加：
devServer: {
...
proxy: [{
context: '/api',
target: 'http://localhost:8987/',
changeOrigin: true
}]
},
一个proxy直接搞定
Server端使用ES6语法
这也是因为代码写的太烦了所以才弄的，因为UI使用Import...from，而服务端使用require实在是太尴尬了，经常会写错，而且export的方法也不一样，遂放弃，装了Babel的插件，完成了ES6语法的使用。
很简单的，先装一堆Babel的插件，跟正常用Babel一样，然后在www文件中引入即可。
require('babel-core/register');
var app = require('../app');
var debug = require('debug')('demo:server');
var http = require('http');
...
封装Koa2的返回
此处就是新增了一个包装类，在类里面增加code，msg等属性，就行了，如此前端每次收到返回即可通过code的内容来判断请求是否成功，一步到位。
代码如下：
const config = require('../config/default.js');
let responseBeautifier = new class{
constructor(){
this.response = {
code:'',
data:{},
msg:''
},
this.StatusCode = new Map();
this.registeStatusCode(0,'OK');
this.registeStatusCode(-1,'ERROR');
}
registeStatusCode(code,description){
this.StatusCode.set(code,description);
}
registeStatusCodes(arr){
for(let [code,description] of arr){
this.StatusCode.set(code,description);
}
}
set(data,code=0,msg){
if(this.StatusCode.has(code)){
return {
code,
data,
msg:this.StatusCode.get(code)
}
}else{
// log Something ,here is an unique code
return {
code,
data,
msg:msg ||'Unresolvable Status Code :'+code
}
}
}
error(code=-1,msg){
if(this.StatusCode.has(code)){
return {
code,
data:{},
msg:msg || this.StatusCode.get(code)
}
}else{
// log Something ,here is an unique code
return {
code,
data:{},
msg:msg||'Unresolvable Status Code :'+code
}
}
}
}();
responseBeautifier.registeStatusCodes(config.resStatus);
export default responseBeautifier;
调用也很简单，直接包裹一下返回值就好：
import resBeautiful from './../lib/resBeautiful';
const list = async (ctx, next) => {
try {
const testList = await Hero.findAll();
ctx.response.body = resBeautiful.set(testList);
} catch (error) {
ctx.app.emit('error', error, ctx);
}
}
Koa2的全局错误捕获
这个感觉自己的做法有些问题，可是查阅了很多相关资料也没有得到什么好的解决办法，暂时先这样吧，诸位有什么意见也可以再评论区提出来。
首先在app.js文件中增加一个全局监听错误的函数：
...
app.on("error",(error,ctx)=>{
ctx.response.body = resBeautiful.error(
-1,
error.message
)
});
...
之后在每次router中捕获错误时，触发全局的错误监听：
const test = async (ctx, next) => {
try {
...
} catch (error) {
ctx.app.emit('error', error, ctx);
}
}
这就完事了，每次出现错误就会返回-1，搞定。
小结
第一周暂时就遇到了这些问题，还好都不是很复杂，基本上都是配置的问题，查阅相关资料也都可以解决，问题不大，诸位若是有什么好的意见也方便在评论区留言。: )
