zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Qt全局宏和变量
    QT_begin_namespace和QT_end_namespace的作用
    Qt 打开文件的默认路径 QFileDialog::getOpenFileName()
    QT的安装及环境配置
    C/C++文件操作1
    C/C++文件操作2
    AnsiString和String的区别、使用
    字符转换
    C++Builder中MessageBox的基本用法
    Windows 编程中恼人的各种字符以及字符指针类型
  • 原文地址:https://www.cnblogs.com/zourong/p/5546113.html
Copyright © 2011-2022 走看看