koa+react(一)

实践出真知

带领大家一步一步从头到尾实践一下koa+react+webpack+redux+babel+eslint项目的环境搭建过程和详细方法以及可能的错误和解决方法。一方面为了巩固和笔记自己的时间过程,另一方面也供大家参考

开发环境

OS X 10.11.5
Atom编辑器

开始

新建项目文件夹mykoa

1
2
3
mkdir mykoa
cd mykoa
npm init

配置eslint+babel环境(据说node7要出来了)

添加.babelrc文件到项目根目录,内容如下:

1
2
3
4
5
6
7
8
9
10
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": [
"transform-runtime"
]
}

安装依赖项:

1
2
3
4
5
$ npm install --save-dev babel-preset-es2015
$ npm install --save-dev babel-preset-react
$ npm install --save-dev babel-preset-stage-1
# babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。
$ npm install --save-dev babel-register

添加server文件夹,新建server.js和babel.js。
babel.js内容为:

1
2
require("babel-register");
require("./server.js");

安装koa

1
2
# 注意,想要使用async和await的写法必须要在安装的时候使用koa@2
$ npm i --save koa@2

server.js内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Koa from 'koa';
const app = new Koa();
app.use(async (ctx, next) => {
const start = new Date();
await next();
const ms = new Date() - start;
console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});
// response
app.use((ctx) => {
ctx.body = 'Hello Koa in app-async.js';
});
app.listen(3000);

安装nodemon启动

1
2
$ npm i -g nodemon
$ nodemon server/babel.js

注1:koa提供了命令行工具runkoa,全局安装后使用runkoa server/server.js,就可以不必配置babel和安装各种babel依赖了,大家可以将.babelrc和package.json里面的babel依赖全部删掉试试。依然可以使用import和async/await等es6语法,但是貌似不能nodemon了,还没研究过。

访问localhost:3000就可以看到页面打印出“Hello Koa in app-async.js”。

配置eslint代码规范检查工具

安装依赖项:

1
2
$ npm i --save-dev eslint eslin-config-airbnb
$ npm i --save-dev babel-eslint

添加.eslintrc到项目根目录,内容为:

1
2
3
4
5
6
7
8
9
{
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"semi": 2,
"no-param-reassign": ["error", { "props": false }]
},
"extends": "airbnb/base",
}

添加.gitignore文件到项目根目录,内容暂时为:

1
2
.idea/
node_modules/

到此,基础的辅助开发环境搭建好了,包括eslint和babel配置。请移步koa+react(二)

如果您觉得受益了,欢迎打赏鼓励。