es6+react环境搭建

工具说明

• Node
• Koa
• React
• Webpack

项目结构

- build  客户端代码的构建文件目录
- config 项目的配置文件
- docs  项目相关的文档目录
- lib  服务端库文件
- logs  日志文件目录
- mock   mock假数据目录
- node_modules  
- server  服务端源代码存放目录
    - controllers  控制器
    - routes  路由
    - service  接口
    - views 视图
- src  客户端源代码存放目录
    - components  
    - pages  
    - views 视图
- tests  测试文件目录

准备开发环境

1. mkdir build config docs lib logs mock server src tests
2. npm init --yes 生成项目的初始文件
3. npm i koa koa-logger koa-route koa-static co-views --save 安装服务器端的相关依赖
4. npm i babel-cli babel-preset-es2015-node5 --save 安装babel依赖,动态编译es6代码
5. npm i babel-loader babel-preset-es2015 babel-preset-react --save 安装Babel相关依赖，用于编译React代码。
6. npm i webpack webpack-dev-server --save-dev 安装webpack打包工具,只在开发环境使用
7. npm i react react-dom --save
8. npm i mcss mcss-loader --save
9. npm i css-loader file-loader raw-loader json-loader style-loader --save-dev 安装mcss相关依赖,编译css,json等静态资源
10. 创建Webpack配置文件：config/webpack.config.js

11. 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"
    ]
    },

12. 创建入口文件 /src/pages/demo1.js
13. 编写组件 /src/components/root.jsx
14. 编写JS文件,引用组件 /src/controllers/root.js
15. 定义视图文件,引入JS /src/views/root.html
16. 使用npm run build生成打包JS文件
17. 使用npm run watch启动webpack-dev-server
18. 打开浏览器访问http://localhost:8080查看结果

 

参考:(按优先级排列)
http://wwsun.github.io/posts/react-with-es6-part-1.html
http://www.aliued.com/?p=3077