工具说明
- Node
- Koa
- React
- Webpack
项目结构
- build 客户端代码的构建文件目录
- config 项目的配置文件
- docs 项目相关的文档目录
- lib 服务端库文件
- logs 日志文件目录
- mock mock假数据目录
- node_modules
- server 服务端源代码存放目录
- controllers 控制器
- routes 路由
- service 接口
- views 视图
- src 客户端源代码存放目录
- components
- pages
- views 视图
- tests 测试文件目录
准备开发环境
- mkdir build config docs lib logs mock server src tests
- npm init --yes 生成项目的初始文件
- npm i koa koa-logger koa-route koa-static co-views --save 安装服务器端的相关依赖
- npm i babel-cli babel-preset-es2015-node5 --save 安装babel依赖,动态编译es6代码
- npm i babel-loader babel-preset-es2015 babel-preset-react --save 安装Babel相关依赖，用于编译React代码。
- npm i webpack webpack-dev-server --save-dev 安装webpack打包工具,只在开发环境使用
- npm i react react-dom --save
- npm i mcss mcss-loader --save
- npm i css-loader file-loader raw-loader json-loader style-loader --save-dev 安装mcss相关依赖,编译css,json等静态资源
- 创建Webpack配置文件：config/webpack.config.js
package.json文件里新增:
"scripts": {
"start": "babel-node src/pages/demo1.js",
"build": "webpack --config config/webpack.config.js",
"watch": "webpack-dev-server --config config/webpack.config.js --hot --inline --progress --colors --devtool eval"
},
"babel": {
"presets": [
"es2015-node5"
]
},- 创建入口文件 /src/pages/demo1.js
- 编写组件 /src/components/root.jsx
- 编写JS文件,引用组件 /src/controllers/root.js
- 定义视图文件,引入JS /src/views/root.html
- 使用npm run build生成打包JS文件
- 使用npm run watch启动webpack-dev-server
- 打开浏览器访问http://localhost:8080查看结果
参考:(按优先级排列)
http://wwsun.github.io/posts/react-with-es6-part-1.html
http://www.aliued.com/?p=3077