es6+react环境搭建

时间:2024-08-19 08:07:13

工具说明

  • 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